Blog 129 - Blog colour cover front page

Pro

Bento-style blog section with one large flat-colour feature cover beside a stack of smaller colour cards, all set with type instead of photos.

Shadcn Blog 129 block

Component data

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

Blog 129 block design & features

The block opens with a heading, description and archive link, followed by a magazine front page. A large feature cover spans two columns and two rows, with an oversized title, a short excerpt and the author line set directly on a single flat colour.

Two smaller covers stack beside the feature, and a row of three more sits underneath. Each card carries its category and issue number along the top and the title, author, date and read time at the bottom, so every post reads as a complete cover.

Every post defines its own background and text colour, so contrast holds in light and dark themes while the section around it follows the theme. Hovering a card softens it slightly and brings up its arrow.

On tablet the feature runs full width above a two-column grid of smaller covers, and on mobile everything stacks in a single column.