Blog 127 - Guides as handbook covers

Pro

A grid of guide covers, each pairing a real photo with a flat colour band that carries the title, plus a plain author and read-time line.

Shadcn Blog 127 block

Component data

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

Blog 127 block design & features

The block opens with an oversized "Guides" heading, a short paragraph and a plain underlined link to the full guide library.

Below sits a three-column grid of guide covers. Each cover stacks a 4:3 photo on top of a flat colour band, and the band carries the guide title in large tight type with a one-line summary underneath. Every guide sets its own band and text colour, so the grid reads like a shelf of printed handbooks.

Under each cover a single line gives the author and read time. There are no icons, badges or numbering. The whole cover is clickable, and on hover the title underlines.

On tablet the covers sit two to a row, and on mobile they stack in a single column.