Blog 131 - Blog colour band list

Pro

Full-width editorial list of blog posts, each set as a wide flat-colour band with a large title, uppercase category and meta on the right.

Shadcn Blog 131 block

Component data

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

Blog 131 block design & features

The block presents recent posts as a stack of wide colour bands under a heading, description and archive link. Each band is a single flat colour, with the category and issue number in small tracked capitals on the far left, the title set large across the middle and the author, date and read time on the right.

Every post defines its own background, hover and text colour, so each band keeps strong contrast in both light and dark themes while the surrounding section follows the theme. The bands sit close together with small gaps, reading like a striped table of contents.

Hovering a band shifts it to a slightly different shade of its colour, firms up the round button's outline and nudges the arrow inside it. There are no image or card transforms, so the list stays calm and readable.

On mobile each band stacks its category row, title and meta vertically while keeping the full-width colour treatment.