Blog 33 block design & features
Blog33 is a centered blog archive built with shadcn/ui, pairing a short heading and description with an eight-post grid underneath. Each card stacks a 4:3 thumbnail, a secondary category badge, a title clamped to two lines, a two-line excerpt, and a meta row with the publish date and read time. The thumbnail and the title are separate links to the same post.
Cards have no border or fill, so the rounded thumbnails and the soft gray badges carry the structure. Titles are small and semibold, excerpts sit in muted gray, and the meta row steps down again with a faint dot between a muted date and an even lighter read time. Rows are separated by wide vertical gaps. Hovering the thumbnail dims it slightly, and hovering the title underlines it. Nothing animates on load.
This is a restrained, editorial take on the standard four-column post grid. The centered intro and the filled category badges set it apart from the left-aligned siblings that use plain uppercase labels, and the 4:3 crop gives images more height than the 16:9 variants. Complexity is low: it needs eight posts with images, categories, short summaries, dates, and read times.
The grid drops to two columns on small tablets and one column on phones. Meta rows are pushed to the bottom of each card so dates line up across a row even when titles wrap differently.