Post thumbnail: 10 CSS Material Design Cards

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