40+ CSS Material Design Cards

Last Updated on by in CSS Examples
CSS Material Design Cards

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)

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.