Blog 70 - Bordered blog post cards with author avatars

Pro

Three bordered blog post cards with an edge-to-edge cover, category, title, excerpt, and author avatar byline with date.

Shadcn Blog 70 block

Component data

ID
blog70
Access
pro
Created
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 70 block design & features

Blog70 is a three-card article row built with shadcn/ui, set under a plain section heading. Each bordered card has a 16:9 cover running edge to edge across the top, then a padded body with an uppercase category label, the title, an excerpt clamped to three lines, and a two-line byline: a round avatar beside the author name stacked over the date.

Look closely and the structure comes from the shell: hairline borders, a card background, and large rounded corners, with the photo clipped to the top edge. The byline is pinned to the bottom of each card so the three avatars align even when excerpts differ in length. The author name is medium weight in the foreground color, with the date muted beneath it. Covers dim slightly on hover and titles underline on hover, while the card itself stays still.

A friendly, people-forward take on the bordered card, simple and conventional. Next to the borderless rows, the card shells and portraits give it more structure and a more personal tone. Each of the three posts needs a cover image, an author name, and a headshot.

Two columns at small widths, with the third card wrapping alone onto a second row, and one column on phones.