Blog 37 block design & features
Blog37 is a filterable blog section built with Shadcn UI Badge, Button, and Card components. On large screens it splits into a narrow sidebar and a wide feed. The sidebar holds the section heading, a short description, and a vertical list of small ghost category buttons, and it stays pinned while the feed scrolls past. The feed shows up to five rows that filter in place when a category is chosen: each pairs a 16:9 thumbnail on the left with a secondary category badge, author, and date, then a linked title, summary, and "Read more" link with an arrow.
The sidebar sets a compact tone, with a smaller heading than the other row blocks and a body-size muted description. The selected filter takes a soft secondary fill while the rest stay transparent. In the feed, hairline dividers run between rows only, with no rule above the first or below the last. The meta line steps from the filled badge to a medium-weight author, a faint dot, and a muted date. On hover the thumbnail dims slightly and the title underlines, each as its own link. There is no entrance animation.
This is the most navigational block in the row family. Compared with Blog17, the heading moves into the sidebar, filtering works at every screen size, and each row carries a badge and read-more link. Complexity is moderate: it keeps client-side filter state, and posts need categories matching the filter list along with thumbnails, authors, dates, and summaries.
Below large screens the sidebar becomes a regular header, and the filters wrap into a horizontal row of buttons above the feed. Rows stack the thumbnail over the copy on phones and sit side by side from small screens up. Post links open in a new tab by default.