Blog 55 block design & features
Blog55 is a zigzag article listing built with shadcn/ui, introduced by a left-aligned heading. Four rows follow, each split into two equal columns: the first and third rows put the 16:9 cover on the left, the second and fourth on the right. The copy column is vertically centered and stacks an uppercase category label, a large title, an excerpt, and a final line combining date, read time, and a read link with an arrow.
Hairline dividers run between rows, and the first and last rows sit flush with the edges of the list. Covers have rounded corners with no border, and there are no card shells, so whitespace and type carry the structure. Meta is quiet and set in plain text: a small tracked category label, a muted date, a fainter read time, and the read link in full color. Cover and title hover independently, the image dimming slightly and the title underlining. The layout is static.
This version is lighter and more text-forward than a badge-driven alternating feed, with an understated, almost print-like quality. Complexity is moderate and image-driven: four stories, each needing a cover photo and an excerpt long enough to fill the space beside it.
The two-column split starts early, at the small breakpoint, so the zigzag holds on large phones and tablets. Narrower screens stack every row with the image above the text.