Hero 267 - Inset-image hero with left-bleed panel

Pro

A two-column hero with left media panel bleeding to the viewport edge, main and inset square images, and right-column headline with dual CTAs.

Shadcn Hero 267 block

Component Data

  • ID:hero267
  • Access:pro
  • Created:Apr 1, 2026
  • Updated:Jun 9, 2026
  • Type:block

Hero 267 block design & features

Hero267 is an inset-image hero built with shadcn/ui buttons in a two-column layout. The left column is a muted framed panel where the primary image covers most of the surface and a smaller square inset sits toward the bottom-right corner, overlapping the outer edge toward the copy side. The right column vertically centers a display heading, description, and paired primary and outline buttons.

The media panel breaks out toward the left viewport edge on large screens while rounding stays open on the side facing the text column. The main image uses top-weighted cropping inside a bordered inner frame.

It reads as a refined product feature block with asymmetric weight on the media side. Complexity is moderate: you need both a wide hero screenshot and a square inset detail for balance.

Mobile stacks media first then copy, with the inset scaling down while staying outside the main frame through column padding.