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
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
2. 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
3. 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
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
5. 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)
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
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
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
Made with: Html / CSS
Created by markelrayes, CreatedAt March 27, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
10. 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
11. 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
12. 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
Made with: Html / CSS
Created by Steve Meredith, CreatedAt May 5, 2019
Responsive : yes
Dependencies : Google Fonts
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Top comments (0)