Collection of free HTML and CSS material design card code examples.

10 CSS Material Design Cards

Collection of hand-picked free HTML and CSS material design card code examples.

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

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

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

Author

  • Viraj Trivedi

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

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

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: -

Demo image: Material Card Material Card - GIF Demo

Author

  • Abdul Razak Shaikh

Made with

  • HTML / CSS

About the code

Material Card

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

Dependencies: -

Demo image: Material Cards

Author

  • Thomas

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

Made with

  • HTML / CSS

About the code

Profile Card

Material Design: profile card.

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

Dependencies: font-awesome.css

Demo image: Material Cards Material Cards - GIF Demo

Author

  • ZhangZhuo

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

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

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: -

back to top