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
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
4. Material Design card for blog post
5. Material Design cards in 3 sizes
6. “Drag and throw” cards
7. Material Design Card For Blogs
8. Animated Material Design weather card
9. Card with overlay animation
10. User profile widget