Blog 5 block design & features
Blog5 is an archive-sized post grid built with shadcn/ui Avatar, Badge, and Button that shows up to nine posts in three rows. Under a heading and intro paragraph, each post shows a 3:2 cover image, a secondary category badge, a linked title, a two-line summary, and a byline with a round avatar beside the author name and date.
Generous horizontal gutters and taller row gaps keep nine cards from feeling crowded. Nothing frames the cards; rounded covers and whitespace do the separating. Text follows a clear three-step scale: semibold titles, small muted summaries, then a medium-weight author name above a muted date. On hover the cover image dims slightly and the title underlines, as two independent links. No entrance animation.
It reads as a full listing page rather than a teaser strip, and is the most content-heavy of the badge and avatar grids in this set. Complexity in the code is low but content demand is high: nine cover photos, nine summaries, and author headshots, with initials as a fallback.
Columns go from one on mobile to two at medium widths and three on large screens. A full-width "View all posts" button shows under the grid on mobile only.