25+ CSS Material Design Cards (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS material design card code examples. These will improve your website's design significantly.
1. Skill Material Card
A material card to display skill
Author: Balsakup (Balsakup)
Links: Source Code / Demo, Dribbble.com
Created on: October 27, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material, material card, card, skill
2. CSS Material Cards Design
Material Cards with SASS, with ripple effect on buttons.
Author: Viraj Trivedi (inf3cti0n95)
Links: Source Code / Demo
Created on: December 2, 2016
Made with: HTML, Sass, JS
Tags: material, card, material design, blog, post
3. Ionic Material Design Cards With Bootstrap CSS
Author: Faizan Saiyed (saiyedfaizan19)
Links: Source Code / Demo
Created on: April 2, 2018
Made with: HTML, CSS
4. Minimal CSS Material Card
Author: Abdul Razak Shaikh (abdulrazakshaikh)
Links: Source Code / Demo
Created on: March 17, 2016
Made with: HTML, CSS
5. CSS Skill Material Card
A material card to display skill
Author: Balsakup (Balsakup)
Links: Source Code / Demo
Created on: October 27, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material, material card, card, skill
6. CSS Profile Card
This is some kind of profile card. The Hire me button has a moving gradient hover animation
Author: Russ Perry (rperry1886)
Links: Source Code / Demo
Created on: February 11, 2020
Made with: HTML, SCSS
Tags: card, profile-card, portfolio, social-media
7. CSS Material Cards
Author: Thomas (Brejkish)
Links: Source Code / Demo
Created on: January 19, 2016
Made with: HTML, CSS
8. Material Card With Animated Featured Image
Experiment with material design. Animates the featured image and headline and adds button when hovered.
Author: Knol (knolaust)
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS
Tags: material, hover, card, animation, material design
9. Material Cards
Author: ZhangZhuo (zhangzhuo)
Links: Source Code / Demo
Created on: August 19, 2015
Made with: HTML, SCSS
Tags: material design, css
10. Material Design - Card Effect
Playing with Google Design card effect.
Author: Hugo Giraudel (HugoGiraudel)
Links: Source Code / Demo
Created on: July 21, 2014
Made with: HTML, SCSS
Tags: css, sass
11. Material Design Components: Cards
How to easily create modern material design cards with HTML and CSS - I'd like to show you how to create the most popular Material Design Element - the Card. Using readable HTML and a unique CSS makes assembling a card child's play. The pictures are downloaded for free from: https://pixa...Read More
Author: di@ne (DiEH)
Links: Source Code / Demo
Created on: February 10, 2020
Made with: HTML, CSS
Tags: material design, material design cards, html, css, md cards
12. Material Design Card Component
A fluid implementation of the Material Design Card Component
Author: Brad Brock (verybradthings)
Links: Source Code / Demo
Created on: October 14, 2016
Made with: HTML, SCSS
Tags: material design
13. Material Design CSS Card
Author: Travis Williamson (travisw)
Links: Source Code / Demo
Created on: August 28, 2016
Made with: HTML, CSS
14. Pure CSS Material Design Card
Author: gabriel glauber (gabrielglauber)
Links: Source Code / Demo
Created on: February 26, 2016
Made with: HTML, CSS
15. Material Design Card - For Blog Post Article
A card style blog post build with HTML5 , CSS3 and a little bit of jQuery....
Author: Mithicher (mithicher)
Links: Source Code / Demo
Created on: March 17, 2015
Made with: HTML, CSS, JS
Tags: css3, material card, material design
16. Material Design - Plan Card
Author: Leonardo do Espírito Santo (leoespsanto)
Links: Source Code / Demo
Created on: September 20, 2016
Made with: HTML, CSS
Tags: account, plan, pricing, material, material design
17. Material Design Flip Card CSS3
Author: kouloughli zaki (microsarme6943)
Links: Source Code / Demo
Created on: July 11, 2016
Made with: HTML, CSS
Tags: material, css3, html5
18. Material Design Dashboard Cards
This is Material Design dashboard implementation
Author: Alexander Glinskiy (aleksspeaker)
Links: Source Code / Demo
Created on: April 28, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, dashboard, cards, responsive, bootstrap4
19. Material - Card
Author: Sam Nguyen (neoncitylights)
Links: Source Code / Demo
Created on: July 4, 2016
Made with: HTML, SCSS
20. Bootstrap Material Cards
Author: muladamai (muladamai)
Links: Source Code / Demo
Created on: May 16, 2016
Made with: HTML, CSS
21. Material Design Card Animation
A quick little animation with a material-design card.
Author: Trevor L.J.M. McIntire (uplusion23)
Links: Source Code / Demo
Created on: November 10, 2016
Made with: HTML, CSS, JS
Tags: material, card, material design, animation
More Awesome Lists:
Share: