20+ CSS Card Layouts - Free Code + Demos

feat. direction aware CSS hovers. Submission for #CodePenChallenge. Use-case data from @NASA homepage. VR inspired layout.

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).

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

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

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.

Example testimonials that can be used on a website. Includes a quote, picture place, name, and location.

Cards with the title and release date of the Marvel Avengers movies.

When hover on a cards the CSS transition and transform property work and you can also see the effect.

https://www.youtube.com/watch?v=RPFfpG0SvV0

responsive cards inspired in notion.so

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.