Hero 5 - Split hero with icon button and wide media tile

Pro

A hero pairing headline, supporting line, and large shadcn/ui primary button with leading icon opposite an aspect-video rounded image.

Shadcn Hero 5 block

Component data

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

Hero 5 block design & features

Hero5 keeps shadcn/ui presentation straightforward: a flex row on large screens places headline, short paragraph, and oversized primary button on one side and a single aspect-video frame on the other. Text stays centered on small breakpoints then pins left once horizontal space opens.

The primary action ships with a leading icon slot inside the button so downloads or imports read instantly without a second line of copy.

Media uses rounded corners and object-cover behavior typical of marketing screenshots or photographic fills.

This is a compact block with few moving parts beyond typography scale and the split responsive alignment.