100%

A Collection of CSS Blog Cards

R Proffitt
by Richard Proffitt
iopan design

Blog layout cards continue to grow in sophistication — which doesn't mean that they also increase in complexity; often, with the development of flat material design, Blog Layout Cards have become simplified. But it is the sheer diversity that fasinates me! How can there continue to be so many different ways of simply showing a little basic information?

All of the projects shown here are taken from https://codepen.io/ and I have provided a link to the original content with each listing.

1
Blog Card One

Blog Card fun #1

IMarty

That just some fun in material design. Inspired by the really talented : Magnigenie ! https://dribbble.com/shots/2442471-Material-Blog-Card.

CODEPEN  DEMO

2
Blog Card Two

Blog Post Item

Nodws

Post preview with Css animations and svg icon sprite.

CODEPEN  DEMO

3
Blog Card Three

Article News Card

Andy Tran

This is a demo of Justin Kwak's Article News Card that he posted on Dribbble. Shot Link: https://dribbble.com/shots/2001637-Article-News-Card-UI.

CODEPEN  DEMO

4
Blog Card Four

Blog Cards

Chyno Deluxe

A very minimal responsive blog card design.

CODEPEN  DEMO

5
Blog Card Five

Blog Card

szpakoli

Blog card with hover state.

CODEPEN  DEMO

6
Blog Card Six

Blog Entry Layouts

Russ Beye

Blog Entry Layouts in HTML & CSS.

CODEPEN  DEMO

7
Blog Card Seven

News Cards - CSS only

Aleksandar Čugurović

Pure CSS news cards with revealing content on hover.

CODEPEN  DEMO

8
Blog Card Eight

Responsive Company Cards

Pham Mikun

Card design and switch view.

CODEPEN  DEMO

9
Blog Card Nine

Flexbox Card Grid

Craig Anthony

Quick prototype of equal height cards using flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.

CODEPEN  DEMO

10
Blog Card Ten

CSS Material Design Cards

Stas Melnikov

Nice, clean blog cards.

CODEPEN  DEMO

11
Blog Card Eleven

#1249 - News card with corner tabs

LittleSnippets.net

News card with corner tabs.

CODEPEN  DEMO

12
Blog Card Twelve

Responsive Card

Antoine

A basic responsive card.

CODEPEN  DEMO

13
Blog Card Thirteen

3D Fold out reveal

Andrew Canham

Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.

CODEPEN  DEMO

14
Blog Card Fourteen

Responsive Company Cards

Pham Mikun

Card design and switch view.

CODEPEN  DEMO