Blog 24 - Horizontal blog cards with thumbnails

Pro

Centered Badge-led header over a max-width feed where each post Card pairs a fixed-width thumbnail link with label, author, date, title, summary, and Read more row.

Shadcn Blog 24 block

Component Data

  • ID:blog24
  • Access:pro
  • Created:Jan 5, 2025
  • Type:block

Blog 24 block design & features

Blog24 is a flexible feed layout built with shadcn/ui Badge, Card, and Button components. The intro matches Blog23’s centered badge, heading, and description pattern, but each entry becomes a horizontal split on wider screens: linked thumbnail image with rounded corners and fixed landscape proportions on the left, and a text stack on the right with badge-author-date row, linked title, muted summary, and “Read more” link with arrow.

Stacked layout on small screens keeps the image above copy so thumb-first scanning still works when columns collapse.

Muted foreground handles metadata while titles stay bold and tight-lined, which preserves density compared with the full-bleed stacked cards variant. Borderless transparent cards keep rows airy even when summaries run long.

Footer outline button mirrors Blog23’s behavior for outbound archive links. This block suits feeds where you want thumbnails beside copy without entering carousel territory; wiring is mostly passing structured post objects plus header strings.