Blog 38 - Featured hero with three cards

Pro

Section heading with outline action, split featured story with wide image and copy, then a three-column row of linked cards with category badges and metadata.

Shadcn Blog 38 block

Component Data

  • ID:blog38
  • Access:pro
  • Created:Jun 11, 2026
  • Type:block

Blog 38 block design & features

Blog38 stacks a full-width featured story above a horizontal row of three supporting cards, built with Shadcn UI Badge, Button, and Card primitives. The header pairs a title and muted subheading with a rounded outline button, then the lead entry spans two columns on large screens with a wide cover image beside category badge, headline, excerpt, and author metadata. Below, three equal cards repeat the same content pattern at a smaller scale with clipped excerpts and compact metadata rows.

Surfaces stay flat with hairline borders and rounded corners rather than heavy shadows. Hover feedback is limited to subtle image scale on the hero and opacity shifts on card thumbnails, keeping motion restrained.

The layout reads editorial and structured rather than mosaic or sidebar-driven. Complexity is moderate because you supply one enriched featured post plus three secondary entries with imagery, categories, and bylines.

On smaller breakpoints the hero image stacks above its copy and the three cards collapse to a single column while preserving badge and metadata ordering.