Feature 239 - Split feature with dotted frame and image tile

Basic

A bordered inset layout pairing outline badge headline body and outlined button opposite a dotted-frame media tile with dated overlay headline gradient wash and chevron teaser link.

Shadcn Feature 239 block

Component Data

  • ID:feature239
  • Access:basic
  • Created:Mar 16, 2025
  • Type:block

Feature 239 block design & features

Feature239 renders a dotted rectangular frame wrapping a responsive two-column interior built with Shadcn UI badge and button patterns. The text column stacks an outline pill badge whose icon gap spreads on hover, a large multi-line customizable heading that honors newline breaks in source copy, muted supporting paragraph text, and a rounded outline action with outbound arrow glyph. The media column nests a softened panel that brightens slightly on hover around a squared image with rounded corners, a bottom-weighted gradient wash, and an overlaid editorial block with eyebrow date line, emphasized title, thin divider bar, teaser paragraph, and a chevron-led link label at the foot.

Thin dotted rules and corner nodes box the composition, giving editorial layout vibes. Typography uses restrained weights with tight tracking headlines and light overlays on the photographic side. Hover states subtly animate gaps and tint shifts without flashy color fills.

Fashion-drop inspired split without actual ecommerce controls. Complexity is moderate: props-driven text and image wiring plus handcrafted overlay placement. Developers must supply earnest hero photography and succinct overlay copy to justify the asymmetric weighting.

Stacks on small breakpoints with generous padding retained; the dotted frame survives as a structuring device while the promo image tile scales within the gutter.