Blog 42 - Full-bleed blog carousel with dot indicators

Pro

Section intro in a container above a full-bleed horizontal carousel of bordered story cards with cover image, category badge, headline, excerpt, date, and clickable dot pagination.

Shadcn Blog 42 block

Component Data

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

Blog 42 block design & features

Blog42 pairs a contained heading block with a Shadcn UI Carousel track that breaks to full viewport width for wide story cards. Each slide is a bordered linked panel with a 16:10 cover image on top followed by a secondary category badge, headline, supporting excerpt, date, and a trailing arrow affordance. Partial slide widths on the track leave neighboring cards visible at the edges, and centered dot indicators below reflect the active slide and jump on click.

Imagery sits cleanly inside each card with copy stacked beneath, keeping headlines readable without overlays. Hover motion is limited to a slow image scale and arrow nudge, keeping focus on photography and headlines.

The layout reads bold and magazine-like compared with compact card grids. Complexity is moderate because wide imagery, supporting copy, and synchronized dot state all need real content per slide.

The intro stays within the standard container while the carousel spans edge to edge; dots remain centered under the track on all breakpoints.