Blog 52 block design & features
Blog52 is a feature section built with Shadcn UI, opening with a left-aligned heading. The lead post is a bordered card with an ultra-wide 21:9 cover across its full width. Below the cover, the text splits: on the left, an uppercase category label, large title, summary, and a small avatar with author name and role; on the right, a read time with a clock icon, the date, and a read link with an arrow. A four-column grid of bordered cards follows, each with an inset 4:3 image, uppercase category, title, and a footer of date and read time pinned to the bottom.
Surfaces are fully contained, with thin borders and slightly rounder corners than most siblings. The lead cover runs edge to edge while the small cards inset their images with their own rounding. Meta is layered in three tones: foreground author name, muted role and date, and a lighter read time. Category labels are small, uppercase, and spaced out. Images dim on hover and titles underline; the read link underlines with a darkening arrow. No entrance animation.
It has the most detailed metadata in the subgroup, giving it the feel of a well-run publication or engineering blog. The panoramic cover is its signature, wider than any other lead in the family. Complexity is moderate: five images, an author photo, and categories, dates, and read times for every post.
On mobile the lead card's meta column drops beneath the summary, and the grid moves from one column to two on small tablets and four on large screens.