Blog 122 - Blog coloured cover wall

Pro

Grid of blog cards with bold flat-colour covers and oversized titles set directly on the cover, with no photography.

Shadcn Blog 122 block

Component data

ID
blog122
Access
pro
Created
Oct 30, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 122 block design & features

The block arranges six posts in a three-column grid under a heading, description and archive link. Each card is a tall 4:5 cover filled with a single flat colour, with the post title set large at the bottom and the category and issue number along the top.

The colours come from a curated palette, and every post defines its own background and text colour so contrast holds in both light and dark themes. Below each cover a meta line shows the author, date and read time.

Hovering a cover reveals a round arrow button in the corner with a simple fade. The type-led covers give the section a magazine or newsletter feel without relying on images.

On tablet the grid drops to two columns, and on mobile the covers stack in a single column and switch to a square ratio.