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

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.

Preview Demo

Download on GitHub

2. Card-depth.js

card-depthCard-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.

Download on GitHub

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.

See the Pen Live Material Design User Widget by Mattia Astorino (@MattiaAstorino) on CodePen.

 

 

#CSS #development #examples #templates #webdesign #materialdesign #inspiration #concept #download #themes #websites #free #Google

10 responses on “10 Material Design cards for web in CSS & HTML

  1. that is my favorite card based design: http://www.intentionallies.co.jp/content_normal.html move the cards around and click.
    This is Flash based and 10(!) years old now and still looks like it is coming from future. Does anybody now a similar card behavior in HTML5? it shouldn’t be too difficult to make because there are some good JS physics libs around (moving around like in that example on different points of card is not trivial otherwise).

  2. Mantas Malukas MDB

    Hi Flying Dog, thanks for the comment. Maybe this would help? It’s not entirely what you are looking for , but it’s quite interesting plugin http://tympanus.net/Development/Baraja/

    1. Hi, this is a very interesting demo, thanks! But I wanted to point out the combination of physics behavior (like Box2D) + zoom with HTML5 cards. That would be new.

    2. Hi, I implemented it now in HTML5 and wrote a blog article about it coming with full source code:
      “Bringing card design to a new level. A physical desktop approach beyond Material Design”
      http://flyingdog.de/nhp/blog/cards/How_to_Cards_Desktop.php

  3. David

    My version with google palette color option: https://github.com/marlenesco/material-cards

  4. aliya

    I noticed that the material design docs don’t include ‘flip’ as an action that cards can take. I generally find them extremely opinionated about limiting the interaction (as any good framework should be). What are your thoughts on that and how do we reconcile adding new interactions that aren’t included in the design docs?

  5. Jeff

    The material design ripple effect is busted on the subscribe button on this website. (Talking about a minor style bug in the lightbox that appears when you scroll to the bottom of the article.) It works in Chrome, but not in Firefox/IE because of a math calculation that isn’t robust across browsers.


    jQuery(‘#wpmchimpa .wpmchimpa-subs-button’).click(function(e){

    // this coordinate calculation doesn’t work in Firefox/IE

    var top = e.pageY – rect.top – ripple.offsetHeight / 2 – document.body.scrollTop;
    var left = e.pageX – rect.left – ripple.offsetWidth / 2 – document.body.scrollLeft;

    });

    try changing your calculation to this, it should fix the bug:
    var de = document.documentElement;
    var top = e.pageY – (rect.top + window.pageYOffset – de.clientTop) – (ripple.offsetHeight / 2);
    var left = e.pageX – (rect.left + window.pageXOffset – de.clientLeft) – (ripple.offsetWidth / 2);

  6. Nice cards!
    I also created a Material Design card for E-commerce or others contexts, you can add in favorite and checkout: https://www.louistiti.fr/css3-carte-interactive-e-commerce-material-design/37

  7. malinscky

    Nice cards
    Thank you, Hercus!

  8. Wow these are amazing, saves loads of time, thank you.

Leave a Reply