Collection of hand-picked free HTML and CSS material design card code examples from codepen and other resources. Update of October 2018 collection. 5 new items.

Related Articles

  1. CSS Cards
  2. CSS Blog Cards
  3. CSS Card Hover Effects
  4. CSS Card Layouts
  5. CSS Flip Cards
  6. CSS Credit Cards
  7. CSS Movie Cards
  8. CSS Product Cards
  9. CSS Profile Cards
  10. CSS Recipe Cards
  11. CSS Business Cards
Demo image: Ionic Material Cards with Bootstrap

Author

  • Faizan Saiyed

Links

Made with

  • HTML / CSS

About the code

Ionic Material Cards

Ionic Material cards with Bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

Author

  • Nino9612

Links

Made with

  • HTML / CSS / JS

About a code

Material Card Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: materialize.css, materialize.js

Author

  • Azat

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Material Card Transform

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • sean_codes

Links

Made with

  • HTML (HTML) / CSS (SCSS) / JS

About a code

Material Card with Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Material Card Design Material Card Design - GIF Demo

Author

  • Viraj Trivedi

Links

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

Material Card Design

Another design for card based on the Google's Material Design along with the ripple effect on the CTA.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Skill Material Card Skill Material Card - GIF Demo

Author

  • Balsakup

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Skill Material Card

A Material Design card to display skill.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Material Card Material Card - GIF Demo

Author

  • Raymond Phair

Links

Made with

  • HTML / CSS

About the code

Material Card

Click on the orange circle to show up the diagrammatic overview.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Denis Syroezhkin

Links

Made with

  • HTML / CSS (Sass)

About a code

Material Cards Stack

Material card grid with smooth animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Material Card Material Card - GIF Demo

Author

  • Abdul Razak Shaikh

Links

Made with

  • HTML / CSS

About the code

Material Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Material Cards

Author

  • Thomas

Links

Made with

  • HTML / CSS

About the code

Material Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: material.teal-red.css

Demo image: Profile Card Profile Card - GIF Demo

Author

  • Emil Devantie Brockdorff

Links

Made with

  • HTML / CSS

About the code

Profile Card

Material Design: profile card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Author

  • Mason Fox

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Web Material Card Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: foundation.css, jquery.js

Demo image: Material Cards Material Cards - GIF Demo

Author

  • ZhangZhuo

Links

Made with

  • HTML / CSS (SCSS)

About the code

Material Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Material Card with Animated Featured Image Material Card with Animated Featured Image - GIF Demo

Author

  • Knol Aust

Links

Made with

  • HTML / CSS

About the code

Material Card with Animated Featured Image

Experiment with Material Design. Animates the featured image and headline and adds button when hovered.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Material Design Card Effect Material Design Card Effect - GIF Demo

Author

  • Hugo Giraudel

Links

Made with

  • HTML / CSS (SCSS)

About the code

Material Design Card Effect

Playing with Google Design card effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -