20+ CSS Card Layouts - Free Code + Demos

Collection of 20+ CSS Card Layouts. All items are 100% free and open-source.

1. Tailwindcss Responsive Cards

CSS Card Layouts - Tailwindcss responsive cards
Author: Neil Sandbach (njs)
Created on: June 14, 2018
Made with: HTML, CSS

2. Pure CSS 3D Cards, Reactive And Responsive

CSS Card Layouts - Pure CSS 3D cards, reactive and responsive
feat. direction aware CSS hovers. Submission for #CodePenChallenge. Use-case data from @NASA homepage. VR inspired layout.
Author: Piotr Galor (pgalor)
Created on: June 7, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-cards, css, cards, webui

3. Assorted Cards & Images (CSS Grid + BEM)

CSS Card Layouts - Assorted Cards & Images (CSS Grid + BEM)
A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent).
Author: Stephen Lee (abcretrograde)
Created on: June 2, 2018
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: card, grid, responsive, photo, gallery

4. Isometric Card Grid

CSS Card Layouts - Isometric Card Grid
A remake of an older demo, which is a Codrops-inspired scrollable grid component. This time, I used CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript. Due to use of some modern CSS techniques, this demo won’t work properly in IE. Up...
Read More
Author: Jon Kantner (jkantner)
Created on: January 27, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: 3d, isometric, grid, css-grid

5. Isometric Card Grid

CSS Card Layouts - Isometric Card Grid
A remake of an older demo, which is a Codrops-inspired scrollable grid component. This time, I used CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript. Due to use of some modern CSS techniques, this demo won’t work properly in IE. Up...
Read More
Author: Jon Kantner (jkantner)
Created on: January 27, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: 3d, isometric, grid, css-grid

6. Flexbox Card Grid

CSS Card Layouts - Flexbox Card Grid
Quick prototype of equal height cards using flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.
Author: Craig Anthony (mcraiganthony)
Created on: December 11, 2015
Made with: HTML, Less
Tags: flexbox, equal-height, aspect-ratio, grid, card

7. Cards Design

CSS Card Layouts - Cards Design
Author: Gary Byrne (garyb1)
Created on: April 29, 2020
Made with: HTML, SCSS
Tags: cards, html, css

8. Playing Card CSS Grid ECommerce Layout

CSS Card Layouts - Playing card CSS Grid eCommerce layout
Author: Andy Barefoot (andybarefoot)
Created on: November 4, 2018
Made with: HTML, CSS

9. Testimonials Sample 1

CSS Card Layouts - Testimonials Sample 1
Example testimonials that can be used on a website. Includes a quote, picture place, name, and location.
Author: Meghan Marth (meghanmarth)
Created on: August 25, 2020
Made with: HTML, SCSS
Tags: testimonial, testimonials, card, cards

10. Avenger Cards

CSS Card Layouts - Avenger Cards
Cards with the title and release date of the Marvel Avengers movies.
Author: Meghan Marth (meghanmarth)
Created on: August 24, 2020
Made with: HTML, SCSS
Tags: cards, avengers

11. Cards With Hover Effect

CSS Card Layouts - Cards with hover effect
When hover on a cards the CSS transition and transform property work and you can also see the effect.
Author: Rajeev (Rajeev_Salaria)
Created on: August 19, 2020
Made with: HTML, CSS
Tags: hover, cards, effect, hovereffect

12. Glowing Cards

CSS Card Layouts - Glowing Cards
https://www.youtube.com/watch?v=RPFfpG0SvV0
Author: Zarko Rvovic (nocni_sovac)
Created on: August 17, 2020
Made with: HTML, SCSS
Tags: css, cards, glowing, quotes

13. Cards Design

CSS Card Layouts - Cards Design
Author: Gary Byrne (garyb1)
Created on: April 29, 2020
Made with: HTML, SCSS
Tags: cards, html, css

14. Cards For Site Sections Notion.so Inspo

CSS Card Layouts - cards for site sections notion.so inspo
responsive cards inspired in notion.so
Author: Florencia DeSimone (desimone)
Created on: June 6, 2020
Made with: HTML, CSS
Tags: cards, responsive, inspo, notion

15. Cards Responsive

CSS Card Layouts - Cards Responsive
I was inspired by https://codepen.io/rabakilgur/pen/RYpVQz to make these cards. The original version from rabakilgur don't have responsiveness, so i decided to rebuild them. In this pen, i used bootstrap grid for the container.
Author: 3psy0n (3psy0n)
Created on: May 23, 2020
Made with: HTML, SCSS
Tags: responsive, cards