Blog 16 block design & features
Blog16 is an index-style blog section built with shadcn/ui Button and Separator components. A left-aligned heading and short muted description sit above three rows, each bounded by separators that run the full width of the page rather than the content column. On large screens every row is a four-column grid: a rounded 16:9 thumbnail in the first column, a middle block with the date, linked title, and a wrapping set of tag pills, and a square outline icon button with an arrow pinned to the far right. Rows carry only date, title, and tags, with no summary or byline.
Where its siblings separate posts with open space, this block is ruled: an edge-to-edge hairline runs between each row, while the first and last rows stay open. Tag pills are fully rounded outlines with a trailing muted chevron, and each pill is its own link that fills with a muted background on hover. A muted date sits above a semibold title. The thumbnail dims slightly and the title underlines on hover, the outline button keeps its standard hover, and there is no entrance motion.
The full-bleed rules and clickable pills give this the most navigational, archive-index character in the row family. It is moderately complex and content-light per row: each post needs an image, date, title, and a few tags, and because the pills link independently, each tag needs a destination of its own.
Below large screens the grid collapses to a single column with the thumbnail at full width above the text, and the arrow button hides, leaving the title as the main link.