Hero 192 - Centered hero with medium image and announcement

Pro

A centered marketing hero with a linked promo pill above the headline, two CTAs, optional trust byline, and a bordered medium image.

Shadcn Hero 192 block

Component Data

  • ID:hero192
  • Access:pro
  • Created:Jan 1, 2025
  • Updated:May 3, 2026
  • Type:block

Hero 192 block design & features

Hero192 is a single-column centered hero built with Shadcn UI. A rounded full-width promo strip links above the headline: an outline badge labels the offer, a short announcement line sits beside it with a chevron, and the whole row is clickable. Below that come a large headline, a centered supporting paragraph, a primary button with a trailing arrow icon and an outlined secondary button, an optional one-line byline, and a wide image capped at a max width with rounded corners and a hairline border.

The layout reads light mode first with muted surfaces on the pill and standard foreground on the headline. The promo control reads as a soft capsule rather than a flat text link. Buttons use large sizing on the primary pair. The image uses a taller crop on small breakpoints and shifts to a wide crop from the medium breakpoint up.

This is a straightforward marketing hero close to default shadcn rhythms, with the promo pill row as the clearest differentiator from simpler centered stacks. Complexity is moderate: you supply badge copy, announcement text, CTAs, byline, and hero imagery rather than elaborate decorative layers.

On narrow viewports the announcement line truncates with an ellipsis while the badge stays readable, and the two buttons stack to full width before returning to an inline row on larger screens.