Blog 77 block design & features
Blog77 is a nine-post card grid built with shadcn/ui, three rows of three bordered cards beneath a section heading. Each card has a full-width 16:9 cover, then a padded body with an uppercase category label, the title, a two-line excerpt, and a footer with a round avatar beside the author name stacked over the date.
Compared with the three- and six-card bordered grids, everything is a notch smaller: the title steps down a size, the body spacing is tighter, and the corners are less rounded. Cards keep a hairline border and card background, with the photo flush to the top edge. A medium-weight author name leads a muted date, and the byline sits at the bottom of each card. Hovering the cover dims it, and hovering the title underlines it.
The effect is a dense, orderly staff index, conventional in structure. Its smaller scale lets nine bordered cards share one section without the grid feeling heavy. Complexity is moderate and content-heavy: nine covers, excerpts, and author headshots are needed.
Two columns at small widths leave the ninth card on its own, and phones show one column.