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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

MATERIAL CARD.

Made with HTML/CSS by Abdul Razak Shaikh.

See the Pen
Material Card
by Abdul Razak Shaikh (@abdulrazakshaikh)
on CodePen.

 Demo and Code

MATERIAL CARDS

Made with HTML/CSS by Thomas.

See the Pen
Material Cards
by Thomas (@Brejkish)
on CodePen.

 Demo and Code

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.

 Demo and Code

MATERIAL CARDS

Made with HTML / CSS (SCSS) by ZhangZhuo.

See the Pen
Material cards
by ZhangZhuo (@zhangzhuo)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Categorized in: