25+ CSS Blog Cards - Free Code + Demos
Collection of 25+ CSS Blog Cards. All items are 100% free and open-source.
1. #14 - Large Blog Card
Author: Daiquiri.io (daiquiri)
Links: Source Code / Demo
Created on: March 17, 2017
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: blog card, sans serif, blog, article, read-more
2. Blog Card
Author: Brett (tterb)
Links: Source Code / Demo
Created on: March 18, 2018
Made with: HTML, SCSS
Tags: blog, card, layout, design
3. 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)
Links: Source Code / Demo
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
4. #14 - Large Blog Card
Author: Daiquiri.io (daiquiri)
Links: Source Code / Demo
Created on: March 17, 2017
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: blog card, sans serif, blog, article, read-more
5. #12 - Blog Card: Transparent Text Animation
Author: Daiquiri.io (daiquiri)
Links: Source Code / Demo
Created on: February 28, 2017
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: svg, transparent, transparent-text, article, blog card
6. Blog Post Item
Post preview with Css animations and svg icon sprite
Author: Nodws (nodws)
Links: Source Code / Demo
Created on: September 24, 2016
Made with: HTML, CSS, JS
Tags: blog, post, animated, svg, icons
7. News Cards - CSS Only
Pure CSS news cards with revealing content on hover. Please feel free to drop a comment with some suggestion for improvement.
Author: Aleksandar Čugurović (choogoor)
Links: Source Code / Demo
Created on: August 13, 2016
Made with: HTML, SCSS
Tags: cards, blog cards, news cards, tiles, pure-css
8. Blog Card Fun #1
That just some fun in material design. Inspired by the really talented : Magnigenie ! https://dribbble.com/shots/2442471-Material-Blog-Card
Author: IMarty (IMarty)
Links: Source Code / Demo, Dribbble Shot
Created on: January 12, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, card, fun
9. Hoverable Expandable Blog Cards
Emulate iPhore appstore card tap zooming and expanding
Author: Zach (hirodashi)
Links: Source Code / Demo
Created on: May 19, 2018
Made with: HTML, SCSS, JS
Tags: iphone, jquery, scss, css
10. Blog Card With Hover State
Author: szpakoli (szpakoli)
Links: Source Code / Demo
Created on: March 4, 2015
Made with: HTML, SCSS, JS
11. Hover Blog Cards
Author: CJ ~ RD (cregdav)
Links: Source Code / Demo
Created on: January 27, 2017
Made with: HTML, CSS
12. Blog-card
Author: Lahesh (laheshk)
Links: Source Code / Demo
Created on: February 25, 2018
Made with: HTML, CSS
13. Blog Posts Card Layout - Code The Web
This week's submission is an experimental design for this page on my blog: https://codetheweb.blog/learn/html
Author: Booligoosh (Booligoosh)
Links: Source Code / Demo
Created on: June 5, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-cards, blog
14. Blog Cards
Author: Tudor Suhan (tudorsuhan)
Links: Source Code / Demo
Created on: August 13, 2016
Made with: HTML, SCSS
Tags: blog, cards, responsive
15. Blog Card
Author: Brett (tterb)
Links: Source Code / Demo
Created on: March 18, 2018
Made with: HTML, SCSS
Tags: blog, card, layout, design
16. Card UI Responsive Design W/Html5, Css3
Author: Emre Süslü (devEmre)
Links: Source Code / Demo
Created on: July 5, 2020
Made with: HTML, CSS, JS
Tags: cards, responsive
17. Blog Cards
Responsive Blogs cards created using HTML5 and CSS3
Author: Puskar Adhikari (puskar12)
Links: Source Code / Demo
Created on: June 24, 2020
Made with: HTML, CSS
Tags: blogs, cards, blogs-cards, responsive
18. 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)
Links: Source Code / Demo
Created on: May 23, 2020
Made with: HTML, SCSS
Tags: responsive, cards
19. Blog Card
Just a card. Inspired by a pen of Katherine Kato.
Author: Natalia (natilavega)
Links: Source Code / Demo
Created on: August 29, 2018
Made with: HTML, CSS, JS
Tags: card, blog, post, travel
20. Hover Blog Cards
Author: CJ ~ RD (cregdav)
Links: Source Code / Demo
Created on: January 27, 2017
Made with: HTML, CSS
More Awesome Lists:
Share: