Blog 102 block design & features
Blog102 is a classic blog homepage built with Shadcn UI Badge, Button, and Input components. A large heading and description sit above two columns. The main column is a ruled feed of five posts, each with a four by three thumbnail on the left and a category badge, date, linked title, summary, and author avatar with read time on the right, followed by an outline button to see all articles. The narrower right column is a sticky sidebar with four widgets: an about note, a numbered most-read list with read counts, a wrapping set of topic pills, and a newsletter card.
The feed follows the editorial row style, with secondary category badges, semibold titles, relaxed muted summaries, and small round avatars. Sidebar widgets share small uppercase labels and hairline dividers, and only the newsletter sits on a muted rounded surface so it reads as the call to action. Submitting the email field swaps the form for a short confirmation line with a check.
It is a familiar magazine pattern done with restraint, the sort of layout readers recognise immediately as a blog front page. Complexity is moderate and content-driven: the feed needs posts with thumbnails, authors, and summaries, and the sidebar needs real popularity data and a topic list.
Below large screens the sidebar moves under the feed and stops being sticky, and on phones each feed thumbnail stacks above its text.
