25+ CSS Blog Cards - Free Code + Demos

Collection of 25+ CSS Blog Cards. All items are 100% free and open-source.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

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

CSS Blog Cards - #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

CSS Blog Cards - 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

CSS Blog Cards - 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

CSS Blog Cards - 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

CSS Blog Cards - 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