Blog 100 block design & features
Blog100 is a topic directory laid out like a magazine contents page. A heading and description sit on the left of the header, with a row of three stats on the right showing the number of topics, total articles, and tags. Below, a numbered list of topics runs the full container width between a strong top rule and hairline dividers. Each row has a mono index number, an oversized topic name with its article count set as a superscript, a one-line description, the three latest post titles in that topic, and a circular arrow at the far right. A weighted tag cloud closes the section, with tags sorted alphabetically and sized in three steps by post count.
The design leans on type instead of cards, icons, or images. Topic names are the largest type in the block, numbers use tabular figures, and the arrow circle fills with the foreground color and turns when its row is hovered. While one row is hovered, the other rows fade back so the active topic stands out. The whole row links to the topic, and the post links sit above that link so each can still be clicked on its own.
It is an editorial layout that gives large blogs a real browse path beyond a category filter. Complexity is moderate and content-driven: each topic needs a description, an accurate count, and three recent posts, and the tag list needs counts that match the archive.
On phones each row stacks into number, topic, description, and posts, and the arrow is hidden. The tag cloud wraps freely at every width.