10 Material Design cards for web in CSS & HTML
Card-based design has become one of the most talked about digital design trends in recent months, skyrocketing after the Material Design announcement at Google’s I/O annual developers conference in 2014.
As predicted by many popular web design blogs and magazines, cards will dominate web and mobile design within next few years. As a matter of fact, we can already see how largest companies and websites are moving towards this design shift: Twitter, Facebook, Google, Pinterest, LinkedIn – they are all using card-based design. Web browsers such as Firefox or Safari are also heavily using card elements. And of course, cards are fundamental elements of mobile OS and majority of apps.
Cards are the easiest yet most effective way to fit content on different types and sizes of screen and display it across all platforms using same design style. Needless to say, cards are one of the most significant Material Design elements. We compiled a list of stand-alone Material Design cards in CSS as well as completed HTML source codes from Codepen and GitHub.
1. Flipping Material Design cards
Flipping MD cards is a simple HTML template built with Material Design Bootstrap. Easy to use and add to any web project. Check out on GitHub for detailed usage instructions.
2. Card-depth.js
Card-depth.js allows you to add Material Design cards & shadow effects into HTML without using CSS. Simply add card-depth.js to your code directory and import it to your HTML.
3. Material Design Card with animated image
See the Pen Material Card with Animated Featured Image by Knol Aust (@knolaust) on CodePen.
4. Material Design card for blog post
See the Pen Material Design Card – For Blog Post Article by Mithicher (@mithicher) on CodePen.
5. Material Design cards in 3 sizes
See the Pen Material Design Cards by Mattia Astorino (@MattiaAstorino) on CodePen.
6. “Drag and throw” cards
See the Pen Drag And Throw 3D Card Pile by Chris Gannon (@chrisgannon) on CodePen.
7. Material Design Card For Blogs
See the Pen Material Design Card – For Blog Post Article by Mithicher (@mithicher) on CodePen.
8. Animated Material Design weather card
See the Pen Material Weather Card by Alberto Camacho (@deltacoast) on CodePen.
9. Card with overlay animation
See the Pen Material Overlay Animation by Bhakti Al Akbar Pasaribu (@balapa) on CodePen.
10. User profile widget
See the Pen Live Material Design User Widget by Mattia Astorino (@MattiaAstorino) on CodePen.