Hero 110 - Split hero with avatars, ratings, and layered photos

Pro

A split hero with pill topic label, oversized headline, dual rounded CTAs with sliding labels, overlapping avatars and star row, and a collage of aspect-ratio images above a quote panel.

Shadcn Hero 110 block

Component data

ID
hero110
Access
pro
Created
Dec 27, 2024
Updated
Aug 23, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Hero 110 block design & features

Hero110 is a wide split hero built with shadcn/ui. The left column introduces a small rounded topic capsule, an extra-large multi-line headline, and a muted supporting paragraph. Two pill buttons sit side by side with text that slides upward on hover. Below that, a row of overlapping avatars pairs with five filled stars and a short trust line about user count.

The right column is image-led: three placeholders sit at different positions inside one aspect-ratio frame so they overlap in a stepped collage. Under the collage, a bordered panel holds a large quote icon and a testimonial paragraph in muted type.

Visually this is a SaaS-style hero with strong social proof and editorial stacking on the media side. Complexity is moderate thanks to the layered images, animated button labels, and dual-column rhythm.

On small screens the flex direction stacks the proof and copy block above the visual column while spacing stays generous.