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

  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

Creator

  • Faizan Saiyed

Programming language

  • HTML / CSS

Information the code

Ionic Material Cards

Ionic Material cards with Bootstrap.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

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

Creator

  • Viraj Trivedi

Programming language

  • HTML / CSS (Sass) / JavaScript

Information the code

Material Card Design

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Balsakup

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

Skill Material Card

A Material Design card to display skill.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Material Card Material Card - GIF Demo

Creator

  • Raymond Phair

Programming language

  • HTML / CSS

Information the code

Material Card

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Material Card Material Card - GIF Demo

Creator

  • Abdul Razak Shaikh

Programming language

  • HTML / CSS

Information the code

Material Card

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Material Cards

Creator

  • Thomas

Programming language

  • HTML / CSS

Information the code

Material Cards

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: material.teal-red.css

Demo image: Profile Card Profile Card - GIF Demo

Creator

  • Emil Devantie Brockdorff

Programming language

  • HTML / CSS

Information the code

Profile Card

Material Design: profile card.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Material Cards Material Cards - GIF Demo

Creator

  • ZhangZhuo

Programming language

  • HTML / CSS (SCSS)

Information the code

Material Cards

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

Creator

  • Knol Aust

Programming language

  • HTML / CSS

Information the code

Material Card with Animated Featured Image

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Hugo Giraudel

Programming language

  • HTML / CSS (SCSS)

Information the code

Material Design Card Effect

Playing with Google Design card effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: