Collection of hand-picked free HTML and CSS material design card code examples.
IONIC MATERIAL CARDS
Ionic Material cards with Bootstrap. Made with HTML/CSS by Faizan Saiyed.
See the Pen
Ionic Material Cards with Bootstrap by Faizan Saiyed (@saiyedfaizan19)
on CodePen.
MATERIAL CARD DESIGN
Another design for card based on the Google’s Material Design along with the ripple effect on the CTA. Made with HTML / CSS (Sass) / JavaScript by Viraj Trivedi.
See the Pen
Material Cards Design #2 by Viraj Trivedi (@inf3cti0n95)
on CodePen.
SKILL MATERIAL CARD
A Material Design card to display skill. Made with HTML (Pug) / CSS (Sass) by Balsakup.
See the Pen
Skill Material Card by Balsakup (@Balsakup)
on CodePen.
MATERIAL CARD
Click on the orange circle to show up the diagrammatic overview. Made with HTML / CSS by Raymond Phair.
See the Pen
Material Card: Pure CSS Diagram by Raymond Phair (@Befeepilf)
on CodePen.
MATERIAL CARD.
Made with HTML/CSS by Abdul Razak Shaikh.
See the Pen
Material Card by Abdul Razak Shaikh (@abdulrazakshaikh)
on CodePen.
MATERIAL CARDS
Made with HTML/CSS by Thomas.
See the Pen
Material Cards by Thomas (@Brejkish)
on CodePen.
PROFILE CARD
Material Design: profile card. Made with HTML/CSS by Emil Devantie Brockdorff.
See the Pen
Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika)
on CodePen.
MATERIAL CARDS
Made with HTML / CSS (SCSS) by ZhangZhuo.
See the Pen
Material cards by ZhangZhuo (@zhangzhuo)
on CodePen.
MATERIAL CARD WITH ANIMATED FEATURED IMAGE
Experiment with Material Design. Animates the featured image and headline and adds button when hovered. Made with HTML / CSS by Knol Aust.
See the Pen
Material Card with Animated Featured Image by Knol (@knolaust)
on CodePen.
MATERIAL DESIGN CARD EFFECT
Playing with Google Design card effect. Made with HTML / CSS (SCSS) by Hugo Giraudel.
See the Pen
Material design – card effect by Hugo Giraudel (@HugoGiraudel)
on CodePen.
