Blog 4 block design & features
Blog4 is a short three-post grid built with Shadcn UI Avatar, Badge, and Button. A heading and intro paragraph lead into posts that each show a 3:2 cover image, a secondary category badge, a linked title, a two-line summary, and an author byline with a round avatar beside the name and date.
Posts sit directly on the page background with no card border, spaced apart by generous gutters. Covers carry rounded corners on a muted backing. The byline pairs a small circular avatar with a medium-weight author name over a muted date, which gives each card a clear attribution anchor at the bottom. Covers dim a touch on hover and titles underline, each as a separate link. The grid is static, with no entrance motion.
Friendly and personal compared with the badge-only siblings, since a face sits next to every post. Still a common, low-complexity pattern. It needs a cover image and an author headshot per post, though initials fill the avatar when no photo is supplied.
Below the medium breakpoint a full-width primary "View all posts" button appears under the stacked cards. On larger screens the grid steps up to two and then three columns and the button is hidden.