Hero 323 - Pattern background inset hero with framed media

Pro

A two-column hero with a dot pattern background, muted framed main image, outside inset, dual CTAs, and optional byline under the buttons.

Shadcn Hero 323 block

Component data

ID
hero323
Access
pro
Created
Jun 9, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Hero 323 block design & features

Hero323 covers the section with a subtle dot pattern on a decorative layer while content stays in a standard two-column grid. Copy on the left includes a display heading, paragraph, paired Shadcn UI buttons, and an optional byline line beneath the button row for secondary trust copy.

The right column hosts a muted framed panel matching the inset-image family: padded container, bordered main image with top-weighted cropping, and a square inset hanging outside the bottom-right edge. Pattern and frame combine without viewport bleed.

The result is a busier marketing hero that still follows the inset-image layout pattern. Complexity is elaborate with pattern, frame, outside inset, and dual CTA plus byline slots.

Mobile stacks copy above the framed media; pattern remains full-bleed behind both sections.