css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Responsive material card based on Google Material Color palette in a bootstrap grid.


  1. Love this! Nice work!!

  2. Thank you Steve :)

  3. Amazing! I would position the close button in the same coordinates as the open one.

  4. Awesome work! I can't wait to play around with Material Design!

  5. This is is excellent.

  6. A very neat design, have you thought about implementing a template system. such as moustache then linking it to an api such as http://www.omdbapi.com/

  7. Hello Theo, it's a very good idea, I promise to think about it.

  8. Nice work! Great transitions.

  9. nice and clean!

  10. Awesome work. I would like to convert it in an angular component. Are you agree? Of course credits ;) There will be your name and a link to your codepen :)

  11. Thank you @fabiobiondi, I'm sorry for my late answer, yes, you can do what you want.

  12. amazing card.. this is the reason behind i add this amazing thing in my blog. http://csshint.com/material-design-card-ui/

  13. Awesome Work, The Best Cards in The World!! Thanks Bro!

  14. You did an awesomely good work, love it, and love u

  15. Can someone explain me how it works, things are stuck up.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.