Blog 50 block design & features
Blog50 is a magazine bento built with shadcn/ui Badge, placed under a single large heading. Seven posts fill a three-column grid in three complete rows: a wide card and a tall side card, then three compact cards, then another wide card beside a tall side card. Wide cards include a 16:9 cover, a secondary category badge, a title, and a three-line excerpt. Each tall side card carries a cover that fills the height of the wide card beside it, then a badge and title. The middle row is text only, with a badge and title. Every card ends in a footer with the date on the left and an up-right arrow on the right.
A single bordered panel style in the card color, with large rounded corners, carries every tile, so the mosaic is defined by spans rather than varied surfaces. Wide cards get extra padding and a larger title, while compact cards drop to small type and smaller meta. Side covers grow with the row so the tall cards stay full instead of leaving a gap above the footer. Covers dim on hover, titles underline, and the arrow darkens from muted to full color. Nothing moves.
The alternating spans make this one of the more distinctive blog grids, reading like a newsstand front page rather than an archive. Complexity is moderate: the layout is CSS-driven through fixed column spans, and four posts need photography. The three short middle entries can stay text-only stories with strong headlines.
On phones every card goes full width and the bento becomes a single stacked list, with the three-column arrangement starting at the medium breakpoint.