Are you seeking a CSS Material design card collection that displays the site’s content in a structured way with sleek aesthetics and functional capabilities?
Look no further! In this compilation, we are offering free HTML and CSS code examples that showcase Material Design cards. These code snippets have been sourced from reliable platforms such as CodePen and GitHub.
Material Design Card is a UI component based on Google’s Material Design principles, offering developers a structured way to showcase content on web applications. Our collection showcases the true power of material design, ensuring the latest and most innovative card designs with vibrant colors, typography, and imagery that works seamlessly across different browsers and screen sizes.
Whether you are creating a portfolio site, an eCommerce platform, or a social networking platform, or you want to show multiple pieces of information about products and profiles in a user-centric way, these varied card design styles will surely cater to the visual appeal and user experience of your project.
No matter if you’re a UI developer, a designer, or someone looking to create engaging user interfaces, our collection offers a diverse range of card designs to captivate your audience and enhance user interactions.
Each card design is highly customizable, blending perfectly with your website themes or brand identity. Our dynamic range of Material UI cards offers a dynamic presentation with minimal loading speed and encourages user interaction, boosting engagement rates.
Let’s start exploring our collection and unlock the possibilities to create stunning, immersive user experiences with superior flexibility and aesthetic.
01. material design Cards by google
See the Pen
material design Cards by google by Saransh Barua (@saranshbarua)
on CodePen.
Author: Saransh Barua @saranshbarua
Links: Source Code / Demo
Created on: June 7, 2017
Made with: HTML, CSS
02. Material Design: Profile Card
See the Pen
Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika)
on CodePen.
Author: Emil Devantie Brockdorff @Mestika
Links: Source Code / Demo
Created on: January 15, 2016
Made with: HTML, CSS
03. Material Design Card (Simple)
See the Pen
Material Design Card (Simple) by Travis Williamson (@travisw)
on CodePen.
Author: Travis Williamson @travisw
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, CSS
04. Material design card
See the Pen
Material design card by Arturo Alviar (@arturoalviar)
on CodePen.
Author: Arturo Alviar @arturoalviar
Links: Source Code / Demo
Created on: July 9, 2015
Made with: HTML(Pug), CSS(SCSS)
05. Material Card: Pure CSS Diagram
See the Pen
Material Card: Pure CSS Diagram by Befeepilf (@Befeepilf)
on CodePen.
Author: Befeepilf @Befeepilf
Links: Source Code / Demo
Created on: September 15, 2016
Made with: HTML, CSS
06. Material Card Design
See the Pen
Material Cards Design #2 by Viraj Trivedi (@inf3cti0n95)
on CodePen.
Author: Viraj Trivedi @inf3cti0n95
Links: Source Code / Demo
Created on: December 2, 2016
Made with: HTML, CSS(Sass), JS
07. Material Design Cards
See the Pen
Material Design Cards by tokumewi (@tokumewi)
on CodePen.
Author: tokumewi @tokumewi
Links: Source Code / Demo
Created on: July 9, 2015
Made with: HTML, CSS
08. Material Design Card
See the Pen
Material Design Card by Ben Coullie (@bencoullie)
on CodePen.
Author: Ben Coullie @bencoullie
Links: Source Code / Demo
Created on: March 19, 2016
Made with: HTML, CSS(SCSS), JS
09. Skill Material Card
See the Pen
Skill Material Card by Balsakup (@Balsakup)
on CodePen.
Author: Balsakup @Balsakup
Links: Source Code / Demo
Created on: October 27, 2016
Made with: HTML(Pug), CSS(Sass)
10. Material Design – Card
See the Pen
Material Design – Card by Karl Grittner (@kgrittner)
on CodePen.
Author: Karl Grittner @kgrittner
Links: Source Code / Demo
Created on: July 30, 2015
Made with: HTML, CSS
11. Material Design Cards – Hover State
See the Pen
Material Design Cards – Hover State by michael chan (@mmmchan)
on CodePen.
Author: michael chan @mmmchan
Links: Source Code / Demo
Created on: September 7, 2016
Made with: HTML, CSS
12. Ionic Material Cards with Bootstrap
See the Pen
Ionic Material Cards with Bootstrap by Faizan Saiyed (@saiyedfaizan19)
on CodePen.
Author: Faizan Saiyed @saiyedfaizan19
Links: Source Code / Demo
Created on: April 2, 2018
Made with: HTML, CSS
13. Material Design Card Effect
See the Pen
Material design – card effect by Kitty Giraudel (@KittyGiraudel)
on CodePen.
Author: Kitty Giraudel @KittyGiraudel
Links: Source Code / Demo
Created on: July 21, 2014
Made with: HTML, CSS(SCSS)
14. Material Design Album Card (w/ stars to rate content)
See the Pen
Material Design Album Card (w/ stars to rate content) by Travis Williamson (@travisw)
on CodePen.
Author: Travis Williamson @travisw
Links: Source Code / Demo
Created on: August 29, 2016
Made with: HTML, CSS, JS
15. Material Design Cards
See the Pen
Material Design Cards by Marc Lundgren (@marclundgren)
on CodePen.
Author: Marc Lundgren @marclundgren
Links: Source Code / Demo
Created on: January 3, 2015
Made with: HTML, CSS(Less)
16. Material Cards
See the Pen
Material cards by ZhangZhuo (@zhangzhuo)
on CodePen.
Author: ZhangZhuo @zhangzhuo
Links: Source Code / Demo
Created on: August 19, 2015
Made with: HTML, CSS(SCSS)
17. Google Material Design Cards
See the Pen
Google Material Design Cards by Jon Ryan (@jpryan22)
on CodePen.
Author: Jon Ryan @jpryan22
Links: Source Code / Demo
Created on: November 21, 2015
Made with: HTML, CSS
18. Feature Discovery in Material Design Card
See the Pen
Feature Discovery in Material Design Card by Todor Dimov (@tdrdimov)
on CodePen.
Author: Todor Dimov @tdrdimov
Links: Source Code / Demo
Created on: February 3, 2018
Made with: HTML, CSS, JS
19. Material Card with Animated Featured Image
See the Pen
Material Card with Animated Featured Image by Knol (@knolaust)
on CodePen.
Author: Knol @knolaust
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS
20. Material Design Card with Embedded Video and Animated Share Button
See the Pen
Material Design Card with Embedded Video and Animated Share Button by Brendan (@bjackson2016)
on CodePen.
Author: Brendan @bjackson2016
Links: Source Code / Demo
Created on: July 29, 2016
Made with: HTML, CSS, JS
21. Material Design Card Hover
See the Pen
Material Design Card Hover by Kyle Houston (@styler)
on CodePen.
Author: Kyle Houston @styler
Links: Source Code / Demo
Created on: October 2, 2014
Made with: HTML, CSS(SCSS)
22. Material Cards
See the Pen
Material Cards by Thomas (@Brejkish)
on CodePen.
Author: Thomas @Brejkish
Links: Source Code / Demo
Created on: January 20, 2016
Made with: HTML, CSS
23. Material Design Card
See the Pen
Material Design Card by MDBootstrap (@mdbootstrap)
on CodePen.
Author: MDBootstrap @mdbootstrap
Links: Source Code / Demo
Created on: September 19, 2016
Made with: HTML, CSS
24. Material Design Ripple effect
See the Pen
Material Design Ripple effect by Balint Soos (@balintsoos)
on CodePen.
Author: Balint Soos @balintsoos
Links: Source Code / Demo
Created on: March 11, 2016
Made with: HTML, CSS, JS
25. Material Design – Card
See the Pen
Material Design – Card by Leonardo Santo (@leoespsanto)
on CodePen.
Author: Leonardo Santo @leoespsanto
Links: Source Code / Demo
Created on: July 23, 2016
Made with: HTML, CSS
26. Material Design Cards
See the Pen
Material Design Cards by Zlatko Iliev (@Objective-Zee)
on CodePen.
Author: Zlatko Iliev @Objective-Zee
Links: Source Code / Demo
Created on: March 15, 2017
Made with: HTML, CSS(SCSS)
27. Material Card
See the Pen
Material Card by Abdul Razak Shaikh (@abdulrazakshaikh)
on CodePen.
Author: Abdul Razak Shaikh @abdulrazakshaikh
Links: Source Code / Demo
Created on: March 17, 2016
Made with: HTML, CSS
28. Table Card
See the Pen
Table Card by Tiago Pereira (@tiagopereira)
on CodePen.
Author: Tiago Pereira @tiagopereira
Links: Source Code / Demo
Created on: June 11, 2015
Made with: HTML, CSS
29. Ionic – Material Design – Cards – Newsfeed
See the Pen
Ionic – Material Design – Cards – Newsfeed by Sandoche (@sandoche)
on CodePen.
Author: Sandoche @sandoche
Links: Source Code / Demo
Created on: July 10, 2016
Made with: HTML, CSS, JS
30. Material Design Card Example
See the Pen
Material Design Card Example by Russ D (@russdogg)
on CodePen.
Author: Russ D @russdogg
Links: Source Code / Demo
Created on: Mach 20, 2019
Made with: HTML(pug), CSS(SCSS)
31. Material Design Card Styles
See the Pen
Material Design Card Styles by Trevor (@Trevelopment)
on CodePen.
Author: Trevor @Trevelopment
Links: Source Code / Demo
Created on: May 10, 2016
Made with: HTML, CSS
32. Material Design Cards
See the Pen
Material Design Cards by jayanudin zay (@jayanudin)
on CodePen.
Author: jayanudin zay @jayanudin
Links: Source Code / Demo
Created on: December 30, 2016
Made with: HTML, CSS(SCSS), JS
33. Material Article Preview Card
See the Pen
Material Article Preview Card by Morgan Ashly (@thedoomshine)
on CodePen.
Author: Morgan Ashly @thedoomshine
Links: Source Code / Demo
Created on: August 25, 2016
Made with: HTML, CSS(SCSS)
34. Material-Design-Cards with truncating labels and fixed elements
See the Pen
Material-Design-Cards with truncating labels and fixed elements by Sven (@svensz)
on CodePen.
Author: Sven @svensz
Links: Source Code / Demo
Created on: October 24, 2016
Made with: HTML, CSS(SCSS), JS
35. Material Design Cards
See the Pen
Material Design Cards by Evan Pedrick (@eped22)
on CodePen.
Author: Evan Pedrick @eped22
Links: Source Code / Demo
Created on: September 21, 2016
Made with: HTML, CSS(SCSS)
36. Material Design Card Animation
See the Pen
Material Design Card Animation by Parvez Dittia (@parvezd)
on CodePen.
Author: Parvez Dittia @parvezd
Links: Source Code / Demo
Created on: February 26, 2017
Made with: HTML, CSS, JS
37. Web Material Card Concept
See the Pen
Web Material Card Concept by Mason Fox (@masonfox)
on CodePen.
Author: Mason Fox @masonfox
Links: Source Code / Demo
Created on: October 22, 2015
Made with: HTML(Pug), CSS(SCSS), JS
38. Material Card Login Form
See the Pen
Material Card Login Form by Nino9612 (@Nino9612)
on CodePen.
Author: Nino9612 @Nino9612
Links: Source Code / Demo
Created on: December 21, 2017
Made with: HTML, CSS
39. Material Card Transform
See the Pen
Material card transform by Azat (@AzatKaumov)
on CodePen.
Author: Azat @AzatKaumov
Links: Source Code / Demo
Created on: May 8, 2017
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
40. Material Card With Menu
See the Pen
Front End Day 64 – Material Card with menu by sean_codes (@sean_codes)
on CodePen.
Author: sean_codes @sean_codes
Links: Source Code / Demo
Created on: April 3, 2017
Made with: HTML(Pug), CSS(SCSS)
41. Material Cards Stack
See the Pen
Material Cards Stack by Denis Syroezhkin (@kolpak)
on CodePen.
Author: Denis Syroezhkin @kolpak
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, CSS(Sass)