@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":48838,"date":"2017-08-03T07:52:40","date_gmt":"2017-08-03T11:52:40","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=48838"},"modified":"2017-08-03T07:52:40","modified_gmt":"2017-08-03T11:52:40","slug":"material-design-cards","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/material-design-cards\/","title":{"rendered":"20 Material Design Cards with Demos and Code Snippets"},"content":{"rendered":"

Today’s article brings out an amazing collection of 20 Material design <\/a>cards<\/strong><\/em> with demos and code snippets. Design cards have increased in popularity over the years so, I’ve decided to gather some of the best designs which are available for downloading and using right away.<\/p>\n

The design of a card is very important and it must keep the users engaged from the first glance. These include small pieces of information and eye-catching design concepts. Many design cards include animations and various effects that make them more appealing to users.<\/p>\n

Also, these cards have great color palettes, well-designed layouts, and beautiful typography. Their design may include images, text, links, forms, buttons, etc.<\/p>\n

These cards can be displayed on any device and will fit perfectly any screen size.<\/p>\n

Material Design Card Effect<\/a><\/h2>\n

This is an excellent material design card effect which adds a subtle shadow to your template. This can emerge from various angles, according to your requirements.<\/p>\n

\"Material<\/a><\/p>\n

Material Design Cards<\/a><\/h2>\n

Here is a great illustration of a simple material design card versus an animated card. See both examples and decide which one fits your style.<\/p>\n

\"Material<\/a><\/p>\n

Google Material Design Cards<\/a><\/h2>\n

Follow this link and you’ll discover various templates of material design cards. These have simple but very effective designs that will get your attention.<\/p>\n

\"Google<\/a><\/p>\n

Material Design Card For Blog Post Article<\/a><\/h2>\n

This material design card is perfect for blog posts. It includes an image, links, a small description, a share button, the author’s name and link.<\/p>\n

\"Material<\/a><\/p>\n

MATERIAL DESIGN CARD ANIMATION<\/a><\/h2>\n

This is a beautiful material design card which includes a lovely animation. Follow this link and see the full design and effects.<\/p>\n

\"MATERIAL<\/a><\/p>\n

Flipping Material Design Cards<\/a><\/h2>\n

These beautiful material design cards include a lovely flipping effect that will definitely get your attention. You can download and easily integrate them into your projects.<\/p>\n

\"Flipping<\/a><\/p>\n

Material Design Card With Animated Image<\/a><\/h2>\n

This is a stunning material design card which showcases its full content when hovered over. Follow this link and see it in action!<\/p>\n

\"Material<\/a><\/p>\n

Material Design Cards in 3 Sizes<\/a><\/h2>\n

Here you have an amazing material design card which is available in 3 sizes: big, medium, and small. Download all of them and use them in your current or upcoming designs.<\/p>\n

\"Material<\/a><\/p>\n

Card With Overlay Animation<\/a><\/h2>\n

This design card includes a neat effect that showcases an overlay animation on top of the content. This displays further information about it.<\/p>\n

\"Card<\/a><\/p>\n

Card-depth.js<\/a><\/h2>\n

If you are not a fan of a\u00a0flat design, you can easily create a 3d design by adding a little depth to your templates. Here you have all the info and the code necessary to perform this feature.<\/p>\n

\"Card-depth.js\"<\/a><\/p>\n

\u201cDrag and Throw\u201d Cards<\/a><\/h2>\n

These material design cards were created by Chris Gannon. You can see a stunning animation that will definitely get your attention. Follow this link and see how you can apply this effect to your designs.<\/p>\n

\"\u201cDrag<\/a><\/p>\n

User Profile Widget<\/a><\/h2>\n

This is a simple but stunning user profile widget created by Mattia Astorino. This design includes an image, a small description, social buttons, as well as a neat animation effect.<\/p>\n

\"User<\/a><\/p>\n

Material Design Cards<\/a><\/h2>\n

Here is a lovely collection of material design cards designed by Ruslan Kyba. These are available for non-commercial purposes but please check the license before using them.<\/p>\n

\"Material<\/a><\/p>\n

Horizontal Material Card<\/a><\/h2>\n

This is a stunning material card design created by Adriana Chiabrera. This horizontal template was created using Sketch.<\/p>\n

\"Horizontal<\/a><\/p>\n

Material Design Card Component<\/a><\/h2>\n

Here is a small pack of material design cards which have beautiful color palettes. These were designed by Mattia Astorino and have various layouts.<\/p>\n

\"Material<\/a><\/p>\n

Material Design Cards<\/a><\/h2>\n

Check out this beautiful material design cards which were created by Daniel Zeller. Follow this link and you’ll discover the full features.<\/p>\n

\"Material<\/a><\/p>\n

CSS Material Design Cards<\/a><\/h2>\n

These material design cards were designed by Stas Melnikov using CSS. See the download page and find more about them.<\/p>\n

\"CSS<\/a><\/p>\n

Material Design Card Selection\u00a0<\/a><\/h2>\n

This material card has a stunning design which will get you attention. This layout was well-thought by Diana Yun and it has an impressive design with soft colors.<\/p>\n

\"Material<\/a><\/p>\n

Material Design Business Cards <\/a><\/h2>\n

Here are a couple of outstanding material design business card templates which you can download and use for both personal and commercial purposes. You’ll get the fully editable PSD files and the print ready files.<\/p>\n

\"Material<\/a><\/p>\n

Material Design Card Animation<\/a><\/h2>\n

This wonderful material design card includes a stunning animation which will definitely get the user’s attention.<\/p>\n

\"Material<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Today’s article brings out an amazing collection of 20 Material design cards with demos and code snippets. Design cards have increased in popularity over the years so, I’ve … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":49037,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n20 Material Design Cards with Demos and Code Snippets<\/title>\n<meta name=\"description\" content=\"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/material-design-cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Material Design Cards with Demos and Code Snippets\" \/>\n<meta property=\"og:description\" content=\"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/material-design-cards\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-03T11:52:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1210\" \/>\n\t<meta property=\"og:image:height\" content=\"374\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"20 Material Design Cards with Demos and Code Snippets\",\"datePublished\":\"2017-08-03T11:52:40+00:00\",\"dateModified\":\"2017-08-03T11:52:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/\"},\"wordCount\":730,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/material-design-cards\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/\",\"url\":\"https:\/\/webdesigndev.com\/material-design-cards\/\",\"name\":\"20 Material Design Cards with Demos and Code Snippets\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg\",\"datePublished\":\"2017-08-03T11:52:40+00:00\",\"dateModified\":\"2017-08-03T11:52:40+00:00\",\"description\":\"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/material-design-cards\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg\",\"width\":1210,\"height\":374,\"caption\":\"Material Design Card With Animated Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/material-design-cards\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20 Material Design Cards with Demos and Code Snippets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Material Design Cards with Demos and Code Snippets","description":"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdesigndev.com\/material-design-cards\/","og_locale":"en_US","og_type":"article","og_title":"20 Material Design Cards with Demos and Code Snippets","og_description":"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!","og_url":"https:\/\/webdesigndev.com\/material-design-cards\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2017-08-03T11:52:40+00:00","og_image":[{"width":1210,"height":374,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/material-design-cards\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"20 Material Design Cards with Demos and Code Snippets","datePublished":"2017-08-03T11:52:40+00:00","dateModified":"2017-08-03T11:52:40+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/"},"wordCount":730,"commentCount":0,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/material-design-cards\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/material-design-cards\/","url":"https:\/\/webdesigndev.com\/material-design-cards\/","name":"20 Material Design Cards with Demos and Code Snippets","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg","datePublished":"2017-08-03T11:52:40+00:00","dateModified":"2017-08-03T11:52:40+00:00","description":"Today's article brings out an amazing collection of 20 Material design cards with demos and code snippets. Check them out!","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/material-design-cards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/material-design-cards\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/material-design-cards\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2017\/07\/7_Material-Design-Card-With-Animated-Image.jpg","width":1210,"height":374,"caption":"Material Design Card With Animated Image"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/material-design-cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"20 Material Design Cards with Demos and Code Snippets"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/48838"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=48838"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/48838\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/49037"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=48838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=48838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=48838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}