Blog 30 - Blog rows with square art and read link

Pro

A blog section with a bold page heading and repeating two-column rows pairing a square image with title, uppercase date, excerpt, and a ghost Read control with arrow.

Shadcn Blog 30 block

Component data

ID
blog30
Access
pro
Created
Mar 16, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Blog 30 block design & features

Blog30 presents a list of posts as alternating rows built with shadcn/ui cards and a ghost button that pairs label text with an arrow icon. A very large tracking-tight heading introduces the section; each entry stacks on small screens then becomes a row with a square, rounded image on one side and text on the other. The card shell is borderless with no shadow so the photography and type carry the layout.

Each row shows a bold title, a wide-track uppercase date in muted color, and a relaxed-width excerpt. The Read control grows its horizontal gap on hover for a small motion cue. Images use rounded square crops with object-cover.

The look is bold headline typography with roomy vertical rhythm and a magazine-like rhythm between art and copy.

This block is moderate in complexity and relies on a sequence of real posts with art, dates, and short descriptions.

Wide layouts keep a fixed image column width while the text column stretches.