Blog 22 block design & features
Blog22 is a two-column feature layout built with shadcn/ui Avatar and Button components. The header pairs a large “Tech Insights” title with a muted subtitle on one side and a pill-outline “Read More” button with arrow icon on the other inside a flex row. Below, the primary column shows a wide rounded featured image, a bold multi-line headline, and an author strip with square avatar image, name, and role caption.
The secondary column lists additional topics as horizontal pairs: a narrow thumbnail image beside a paragraph-length blurb for each item, separated by bottom borders until the final row. There are no cards or badges here; separation comes from spacing, borders, and image blocks.
The outer section uses dark-themed foreground and muted tokens for a low-light editorial presentation without extra gradients. Typography stays headline-forward on the left while the right column reads like quick briefing notes.
At smaller widths the grid collapses to a single column with the featured story first and the thumbnail list following. Complexity is moderate and split between one hero story with imagery and several shorter text-plus-thumb rows you map from data arrays.