Blog 35 - Alternating blog rows with dividers

Pro

Centered section intro over full-width rows that alternate image-left and image-right layouts, separated by horizontal dividers with badge metadata and read links.

Shadcn Blog 35 block

Component Data

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

Blog 35 block design & features

Blog35 is a prop-driven editorial feed built with shadcn/ui Badge, Card, and Separator components. A centered heading and muted description introduce the section, then each post occupies a full-width two-column row inside a borderless card shell. Rows alternate which side carries the linked cover image while the opposite column stacks a secondary badge, author and date line, linked headline, summary paragraph, and a text link with arrow icon. Horizontal separators break the sequence between entries so long feeds stay scannable.

Cover images sit in rounded frames with a light border and a subtle opacity fade on hover. Typography keeps titles semibold at a larger scale while metadata stays compact in muted foreground. The card wrapper stays transparent with no shadow so dividers and imagery define the rhythm instead of boxed surfaces.

The presentation feels magazine-like and editorial because alternating art direction creates movement down the page without carousel mechanics. Complexity is moderate: you supply structured posts with labels, outbound URLs, and placeholder or real photography, but the layout logic is a straightforward alternating grid.

On smaller breakpoints each row stacks with the image above copy before the two-column split returns at medium widths. Divider spacing loosens slightly on larger screens to preserve vertical breathing room.