Blog 27 block design & features
Blog27 is a two-stage blog hub built with shadcn/ui Breadcrumb, Card, AspectRatio, RadioGroup, Label, and Button components. The upper region sits on a muted dotted pattern background and splits into a text stack with slash-separated breadcrumbs, a large title, supporting paragraph, and a wide spotlight card that mirrors the smaller tiles below (image ratio frame, title, muted summary, ghost button with arrow). The lower region introduces an “All Blogs” heading and mounts a client-side filter form where horizontal radio items pick categories before rendering a responsive grid of linked cards.
Cards share a consistent thumbnail ratio, bold headlines, constrained summary width, and trailing ghost call-to-action row. Selecting a category filters posts client-side and resets visible count, while “Load More” reveals additional items in batches until the filtered list ends.
Visually the block mixes editorial typography up top with a denser card marketplace below; dotted wallpaper adds texture without competing with imagery.
Complexity is high relative to simpler lists: interleaved demo data, pagination state, and accessible radio labeling all ship in one component. Plan content categories carefully because filtering maps labels to stored category strings case-insensitively.