DEV Community

Cover image for 13 CSS Blog Cards
Frontend Solutions
Frontend Solutions

Posted on

13 CSS Blog Cards

Collection of free HTML and CSS Blog Cards templates examples. Hand-Picked from codepen.io. The blog card component is one of the essential components in any blog because it must show some data like title, publish date, description, and feature image for the readers well and to be easy to read, so here are 26 CSS blog cards templates you can use them.

The Original Article Published on Frontend Solutions - 26 CSS Blog Cards

1. Blog Card Design

Demo Image: Blog Card Design

Made With: HTML (Pug) / CSS (SCSS)

Created by Joshua, Created At July 13, 2020

Responsive : no

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (9.2 kb)


2. Blog card

Demo Image: blog card

Made with: Html / CSS

Created by Battal Şahin, Created At January 9, 2022

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (7.2 kb)


3. Blog Card Slider

Demo Image: Blog Card Slider

Made with: Html / CSS (SCSS) / JS

Created by vin wu, Created At May 11, 2020

Responsive : yes

Dependencies : Google Fonts, swiper.css, swiper.js, jQuery.js

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (18.3 kb)


4. Blog Card Transparent Text Animation

Demo Image: Blog Card Transparent Text Animation

Made with: Html (Pug) / CSS (Less)

Created by Daiquiri.io, CreatedAt March 1, 2017

Responsive : no

Dependencies : Google Fonts, icomoon.css, bootstrap.css, jQuery.js

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (9.6 kb)


5. Blog Card Design

Demo Image: Blog Card Design

Made with: Html / CSS / JS

Created by Robin Garbe, CreatedAt September 1, 2018

Responsive : no

Dependencies : Google Fonts, clamp.js

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (21.8 kb)


6. Blog Card (Sass & Pug)

Demo Image: Blog Card (Sass & Pug)

Made with: Html (Pug) / CSS (Sass)

Created by IMarty, CreatedAt January 12, 2016

Responsive : no

Dependencies : Google Fonts, Font-Awesome.css

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

dribbble shot
Demo & Code
Download (10.6 kb)


7. Blog Posts Card Layout

Demo Image: Blog Posts Card Layout<br>

Made with: Html / CSS

Created by Booligoosh, CreatedAt June 5, 2018

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (13.6 kb)


8. Blog Post

Demo Image: Blog Post

Made with: Html / CSS

Created by Nodws, CreatedAt September 25, 2016

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (20.4 kb)


9. CSS Card

Demo Image: CSS Card

Made with: Html / CSS

Created by markelrayes, CreatedAt March 27, 2020

Responsive : no

Dependencies : -

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (10 kb)


10. Card CSS

Demo Image: Card CSS

Made with: Html / CSS (SCSS)

Created by Damien Flandrin, CreatedAt February 17, 2017

Responsive : no

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (6.7 kb)


11. Responsive Css Card

Demo Image: Responsive Css Card

Made with: Html / CSS

Created by Samir Munjewar, CreatedAt November 20, 2018

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (7.1 kb)


12. CSS Blog Card

Demo Image: CSS Blog Card

Made with: Html / CSS

Created by themodrnhakr, CreatedAt January 14, 2022

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (16.8 kb)


13. CSS Filter Cards

Demo Image: CSS Filter Cards

Made with: Html / CSS

Created by Steve Meredith, CreatedAt May 5, 2019

Responsive : yes

Dependencies : Google Fonts

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

Demo & Code
Download (10 kb)

Top comments (0)