42+ CSS Blog Cards

A comprehensive collection of top 42+ HTML and CSS blog card code examples for web designers, web developers, or UI/UX artists for building eye-catching web designs, blog landing pages, homepages, category pages, or user interface layouts. Checkout now!

1. Blog Cards

See the Pen <a href="https://codepen.io/khadar_ha/pen/xXydLE"> Blog Cards</a> by Khadar Hassan (<a href="https://codepen.io/khadar_ha">@khadar_ha</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Khadar Hassan
Source: Code / Demo
Created on: OCTOBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. Article Deck

See the Pen <a href="https://codepen.io/pouretrebelle/pen/eYmeVjR"> Article Deck</a> by Charlotte Dann (<a href="https://codepen.io/pouretrebelle">@pouretrebelle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlotte Dann
Source: Code / Demo
Created on: JANUARY 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass)

3. CSS Filter Cards

See the Pen <a href="https://codepen.io/steveeeie/pen/NVWMEM"> CSS Filter Cards</a> by Steve Meredith (<a href="https://codepen.io/steveeeie">@steveeeie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steve Meredith
Source: Code / Demo
Created on: MAY 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Blog Card

See the Pen <a href="https://codepen.io/IMarty/pen/zrdYGe"> Blog Card fun #1</a> by IMarty (<a href="https://codepen.io/IMarty">@IMarty</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: IMarty
Source: Code / Demo
Created on: JANUARY 13, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass)

5. Blog Card

See the Pen <a href="https://codepen.io/Stephane/pen/XbjGxO"> Blog Card</a> by Stéphane Deluce (<a href="https://codepen.io/Stephane">@Stephane</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stéphane Deluce
Source: Code / Demo
Created on: MAY 23, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Blog Reveal Layout with CSS Polygons

See the Pen <a href="https://codepen.io/LloydJames/pen/mOWmYY"> Blog Reveal Layout with CSS Polygons</a> by Lloyd James (<a href="https://codepen.io/LloydJames">@LloydJames</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lloyd James
Source: Code / Demo
Created on: NOVEMBER 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Flexbox Blog-Card

See the Pen <a href="https://codepen.io/MartijnBrands/pen/gabzqB"> Flexbox Blog-Card</a> by Martijn Brands (<a href="https://codepen.io/MartijnBrands">@MartijnBrands</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Martijn Brands
Source: Code / Demo
Created on: SEPTEMBER 4, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Animated Grid Card

See the Pen <a href="https://codepen.io/architechnium/pen/xpJRZw"> animated grid card to fullscreen</a> by Matt (<a href="https://codepen.io/architechnium">@architechnium</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt
Source: Source Code / Demo
Created on: JANUARY 14, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Blog Card With Hover State

See the Pen <a href="https://codepen.io/AlecMenke/pen/bNxgRR"> Blog Card With Hover State Developer Challenge #3</a> by Alec (<a href="https://codepen.io/AlecMenke">@AlecMenke</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alec
Source: Code / Demo
Created on: MARCH 7, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Earth News

See the Pen <a href="https://codepen.io/Moiety/pen/gGKRog"> Earth News</a> by Zoë Bijl (<a href="https://codepen.io/Moiety">@Moiety</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zoë Bijl
Source: Code / Demo
Created on: OCTOBER 11, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. Blog Card

See the Pen <a href="https://codepen.io/tterb/pen/KoNzXw"> Blog Card</a> by Brett (<a href="https://codepen.io/tterb">@tterb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brett
Source: Code / Demo
Created on: MARCH 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Blog Layouts

See the Pen <a href="https://codepen.io/JeffAspen/pen/GZNqPm"> Blog Layouts</a> by Jeff Aspen (<a href="https://codepen.io/JeffAspen">@JeffAspen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeff Aspen
Source: Code / Demo
Created on: MARCH 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Wrapping Text Around A Circular Image With CSS Shapes

See the Pen <a href="https://codepen.io/dudleystorey/pen/XWYNzp"> Wrapping Text Around A Circular Image With CSS Shapes</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: AUGUST 20, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Card Grid Tutorial

See the Pen <a href="https://codepen.io/jmegs/pen/opbyXg"> Card Grid Tutorial</a> by John Meguerian (<a href="https://codepen.io/jmegs">@jmegs</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: John Meguerian
Source: Code / Demo
Created on: DECEMBER 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. Blog Card Design

See the Pen <a href="https://codepen.io/rabakilgur/pen/RYpVQz"> Blog Card Design</a> by Robin Garbe (<a href="https://codepen.io/rabakilgur">@rabakilgur</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robin Garbe
Source: Code / Demo
Created on: SEPTEMBER 2, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. CSS only responsive article card with hover effect

See the Pen <a href="https://codepen.io/cycosta/pen/vYLJxwq"> CSS only responsive article card with hover effect</a> by Cynthia Costa (<a href="https://codepen.io/cycosta">@cycosta</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cynthia Costa
Source: Code / Demo
Created on: JUNE 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. Layout practice, using grid

See the Pen <a href="https://codepen.io/bartveneman/pen/PQMzxp"> Layout practice, using grid</a> by Bart Veneman (<a href="https://codepen.io/bartveneman">@bartveneman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bart Veneman
Source: Code / Demo
Created on: MARCH 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Stylus)

18. Blog Card with Hover State

See the Pen <a href="https://codepen.io/szpakoli/pen/xbJjdR"> Blog Card with Hover State</a> by szpakoli (<a href="https://codepen.io/szpakoli">@szpakoli</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: szpakoli
Source: Code / Demo
Created on: MARCH 5, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Bootstrap cards tutorial

See the Pen
Bootstrap cards tutorial by Alex Devero (@alexdevero)
on CodePen.

Author: Alex Devero
Source: Code / Demo
Created on: FEBRUARY 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. News Cards – CSS only

See the Pen <a href="https://codepen.io/choogoor/pen/YWBxrg"> News Cards – CSS only</a> by Aleksandar Čugurović (<a href="https://codepen.io/choogoor">@choogoor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aleksandar Čugurović
Source: Code / Demo
Created on: AUGUST 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Flat Blog layout in CSS3

See the Pen <a href="https://codepen.io/renaudtertrais/pen/kGdjyZ"> Flat Blog layout in CSS3</a> by Renaud Tertrais (<a href="https://codepen.io/renaudtertrais">@renaudtertrais</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Renaud Tertrais
Source: Code / Demo
Created on: OCTOBER 2, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

22. Featured News

See the Pen <a href="https://codepen.io/SebastianOpperman/pen/wZLrQz"> Featured News</a> by Sebastian Opperman (<a href="https://codepen.io/SebastianOpperman">@SebastianOpperman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sebastian Opperman
Source: Code / Demo
Created on: MAY 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Responsive Blog Card Slider

See the Pen <a href="https://codepen.io/JavaScriptJunkie/pen/WgRBxw"> Responsive Blog Card Slider </a> by Muhammed Erdem (<a href="https://codepen.io/JavaScriptJunkie">@JavaScriptJunkie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Muhammed Erdem
Source: Code / Demo
Created on: SEPTEMBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

24. Cool Card Hover Effect

See the Pen <a href="https://codepen.io/usmonovsardor7770/pen/eKvxLQ"> Cool Card Hover Effect</a> by Rotal (<a href="https://codepen.io/usmonovsardor7770">@usmonovsardor7770</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sardorbek Usmonov
Source: Code / Demo
Created on: JUNE 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Blog Posts Card Layout – Code The Web

See the Pen <a href="https://codepen.io/Booligoosh/pen/mKPpQp"> Blog Posts Card Layout – Code The Web</a> by Booligoosh (<a href="https://codepen.io/Booligoosh">@Booligoosh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Booligoosh
Source: Code / Demo
Created on: JUNE 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Large Blog Card

See the Pen <a href="https://codepen.io/daiquiri/pen/bqaVLo"> #14 – Large Blog Card</a> by Daiquiri.io (<a href="https://codepen.io/daiquiri">@daiquiri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daiquiri.io
Source: Code / Demo
Created on: MARCH 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Less)

27. Article Card

See the Pen <a href="https://codepen.io/eyupucmaz/pen/oNbeXOb"> article-card</a> by Eyüp Uçmaz (<a href="https://codepen.io/eyupucmaz">@eyupucmaz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eyüp Uçmaz
Source: Code / Demo
Created on: JUNE 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Flexbox Card Grid

See the Pen <a href="https://codepen.io/mcraiganthony/pen/NxGxqm"> Flexbox Card Grid</a> by Craig Anthony (<a href="https://codepen.io/mcraiganthony">@mcraiganthony</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Craig Anthony
Source: Code / Demo
Created on: DECEMBER 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

29. Blog Card

See the Pen <a href="https://codepen.io/sdcrowe23/pen/OeMqGV"> Blog Card</a> by Scottie (<a href="https://codepen.io/sdcrowe23">@sdcrowe23</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Scottie
Source: Code / Demo
Created on: JUNE 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Modern text decoration with CSS box-decoration-break

See the Pen <a href="https://codepen.io/HenrikFricke/pen/GRNYrXK"> Modern text decoration with CSS box-decoration-break</a> by Henrik Fricke (<a href="https://codepen.io/HenrikFricke">@HenrikFricke</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Henrik Fricke
Source: Code / Demo
Created on: MARCH 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Blog Card- Page

See the Pen <a href="https://codepen.io/ChuiSauCE/pen/KGpQbe"> Blog Card – Page</a> by Lütfü Can (<a href="https://codepen.io/ChuiSauCE">@ChuiSauCE</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lütfü Can
Source: Code / Demo
Created on: OCTOBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

32. Blog entry layouts

See the Pen <a href="https://codepen.io/russbeye/pen/MYeroq"> Blog entry layouts</a> by Russ Beye (<a href="https://codepen.io/russbeye">@russbeye</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Russ Beye
Source: Code / Demo
Created on: DECEMBER 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. Blog Card

See the Pen <a href="https://codepen.io/lyon-etyo/pen/OJmyMGd"> Blog Card</a> by Lyon Etyo (<a href="https://codepen.io/lyon-etyo">@lyon-etyo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lyon Etyo
Source: Code / Demo
Created on: JULY 3, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Blog Cards

See the Pen <a href="https://codepen.io/thepuskar/pen/NWxgbjw"> Blog Cards</a> by Puskar Adhikari (<a href="https://codepen.io/thepuskar">@thepuskar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Puskar Adhikari
Source: Code / Demo
Created on: JUNE 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. Blog Card- Transparent Text Animation

See the Pen <a href="https://codepen.io/daiquiri/pen/GWpPKP"> #12 – Blog Card: Transparent Text Animation</a> by Daiquiri.io (<a href="https://codepen.io/daiquiri">@daiquiri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daiquiri.io
Source: Code / Demo
Created on: MARCH 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Less)

36. Blog Card

See the Pen <a href="https://codepen.io/ChynoDeluxe/pen/bdXeqQ"> Blog Cards</a> by Chyno Deluxe (<a href="https://codepen.io/ChynoDeluxe">@ChynoDeluxe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chyno Deluxe
Source: Code / Demo
Created on: AUGUST 24, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

37. Card Article UI

See the Pen <a href="https://codepen.io/mithicher/pen/ojdXBa"> Card Article UI</a> by Mithicher (<a href="https://codepen.io/mithicher">@mithicher</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mithicher
Source: Code / Demo
Created on: OCTOBER 27, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

38. Dr. Mario pill cards

See the Pen <a href="https://codepen.io/abcretrograde/pen/oddaaa"> Dr. Mario pill cards (v2)</a> by Stephen Lee (<a href="https://codepen.io/abcretrograde">@abcretrograde</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephen Lee
Source: Code / Demo
Created on: MAY 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

39. Blog Post Item

See the Pen <a href="https://codepen.io/nodws/pen/edvjdJ"> Blog Post Item</a> by Nodws (<a href="https://codepen.io/nodws">@nodws</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nodws
Source: Code / Demo
Created on: SEPTEMBER 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Card Hover Effect | SASS | Cubic Bezier

See the Pen <a href="https://codepen.io/KaioRocha/pen/orpKxq"> Card Hover Effect | SASS | Cubic Bezier</a> by Kaio Almeida (<a href="https://codepen.io/KaioRocha">@KaioRocha</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kaio Almeida
Source: Code / Demo
Created on: JUNE 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

41. Blog Card

See the Pen <a href="https://codepen.io/Azadiduniya/pen/QrQOGx"> Blog Card</a> by Zamaal Azad (<a href="https://codepen.io/Azadiduniya">@Azadiduniya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zamaal Azad
Source: Code / Demo
Created on: MAY 9, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

42. Same height cards

See the Pen <a href="https://codepen.io/veronicadev/pen/WJyOwG"> FlexBox Exercise #4 – Same height cards</a> by Veronica (<a href="https://codepen.io/veronicadev">@veronicadev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Veronica
Source: Code / Demo
Created on: MAY 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

43. Blog Card

See the Pen <a href="https://codepen.io/laheshk/pen/MQqzWo"> Blog-card</a> by Lahesh (<a href="https://codepen.io/laheshk">@laheshk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lahesh
Source: Code / Demo
Created on: FEBRUARY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS