Blog 17 - Blog listing with sidebar category filters

Pro

Centered header with Badge and intro copy, then ghost Buttons filter categories beside a stacked feed of linked articles with Separator breaks between items.

Shadcn Blog 17 block

Component Data

  • ID:blog17
  • Access:pro
  • Created:Nov 15, 2024
  • Type:block

Blog 17 block design & features

Blog17 is a client-filtered article feed built with Shadcn UI Badge, Button, and Separator components. A centered column introduces the section with a secondary badge, a large balanced headline, and supporting paragraph text. Below that, a wide grid reserves one column for vertical ghost buttons that switch the active category (including an “All Articles” option) and spans the remaining width with a vertical stack of linked posts showing category label, title, multiline description, author name, and publication date, each block separated by a horizontal separator.

Ghost buttons gain a filled secondary background when selected so the active filter reads clearly against the idle transparent buttons. Article rows rely on typography scale and muted body copy rather than cards or shadows, which keeps the reading column airy even with long excerpts.

This reads as a straightforward marketing blog layout with editorial typography and minimal chrome. Client-side filtering is the main interaction beyond clicking through to posts, so the block feels more utility-focused than decorative.

The category sidebar only appears from large breakpoints upward; on smaller widths visitors see the stacked articles without the filter rail, so plan mobile navigation separately if you need category switching everywhere. Elaboration comes from content volume: many posts with rich excerpts will make the stack long, while the layout itself stays structurally simple.