Hero 34 - Two-column hero on muted panel with bleed image

Basic

A basic-tier hero built with shadcn/ui anchor buttons, pairing padded muted-grid copy with an adjacent photograph that fills its column inside one container-wide split.

Shadcn Hero 34 block

Component data

ID
hero34
Access
basic
Created
Aug 5, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Hero 34 block design & features

Hero34 stacks optional badge text, semibold headline, muted paragraph, and twin anchor buttons from shadcn/ui inside generous padding on a muted panel before handing off to photography that occupies the full opposing column height.

Center alignment on small screens keeps marketing tone approachable, while large breakpoints justify content start on the left so long headlines align with typical editorial grids.

Primary buttons append arrow icons for directional emphasis while secondary outlines stay quieter.

This pattern suits announcements needing equal weight on story and environmental photography without extra ornament.