Hero 83 - Centered hero with announcement badge and triptych

Pro

A centered announcement hero with badge, headline, supporting line, twin full-width buttons on small screens, and three width-weighted images.

Shadcn Hero 83 block

Component data

ID
hero83
Access
pro
Created
Apr 30, 2025
Updated
Jun 8, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Hero 83 block design & features

Hero83 is a centered marketing hero built with Shadcn UI. The upper block stacks a secondary badge, a multi-line headline, short supporting copy, and two large buttons that stretch on phones then sit side by side on wider layouts. Under that, three ratio-locked frames sit in one row with deliberate width weights so the middle canvas reads as the hero width.

Alignment is strictly center so the type block feels like a podium announcement. Images use thin borders, top-weighted crops, and muted cards so photography stays crisp against a plain background.

Classic launch geometry: announce, explain, give two paths, then show product stills. Complexity is moderate thanks to the trio of locked-ratio images plus dual CTAs.

Narrow viewports keep the vertical stack; the triptych squeezes proportionally while preserving the width mix.