Hero 322 block design & features
Hero322 places copy on the left and a ring-accented media stack on the right. The main image sits inside a chart-tinted ring with offset, bordered inner crop, and top-weighted cropping. When byline text is supplied, it renders as a floating pill on the top-right of the main photo with a light backdrop blur.
The inset thumbnail anchors outside the top-left corner of the ring stack, opposite many bottom-anchored siblings, creating a diagonal tension across the composite. Dual Shadcn UI buttons follow the text column.
Visually the block layers ring, floating label, and corner inset for a premium product-launch tone. Complexity is elaborate and mixed: rings and pills are CSS-driven while two images and optional byline text complete the story.
Top and left padding on the media column reserves space for the top-left inset on all breakpoints.