Hero 321 block design & features
Hero321 uses a twelve-column grid so the media column can overlap the copy column on large screens, pulling the photo partially over the text block for a magazine-style hero. Copy stays in five columns while the image spans seven with a negative margin overlap. A soft chart-colored blur orb sits behind the media stack.
The main image carries border, muted background, top-weighted cropping, and a medium shadow. The inset square hangs outside the bottom-right corner with the standard subtle shadow treatment. Shadcn UI buttons provide primary and outline actions under the heading group.
This layout feels dynamic and editorial compared with a strict fifty-fifty split. Complexity is elaborate due to overlap math, blur decoration, and outside inset positioning together.
On mobile the overlap collapses to a normal stacked column flow without negative margins.