Blog 103 block design & features
Blog103 is a mixed-media content grid built with shadcn/ui Button components. A heading and description sit on the left with filter buttons for All, Video, Podcast, and Articles on the right, above a three-column grid of six cards. Every card has a video-ratio cover, a small uppercase format label with an icon and duration, a linked title, a two-line excerpt, and an author avatar with date.
The format shapes the cover. Video covers carry a centered round play button and a duration chip in the bottom corner, podcast covers add an episode chip in the top corner and a headphones play button, and articles keep a clean photo. Chips and buttons sit on frosted background-colored pills so they stay readable over any photo in light and dark themes. Choosing a filter narrows the grid to that format in place, with a short empty message if a format has no posts.
It feels like a modern media hub rather than a text blog, a less common pattern for teams that publish talks and episodes alongside written posts. Complexity is moderate and content-driven: each item needs a cover, a format, and an accurate duration or episode number.
The grid drops to two columns on tablets and a single column on phones, and the filter buttons wrap under the heading.