Hero 159 - Split hero with bottom-left inset card

Pro

A two-column hero with headline, paragraph, primary pill CTA with sliding arrows, optional byline, main photo, and square inset overlapping the bottom-left corner.

Shadcn Hero 159 block

Component Data

  • ID:hero159
  • Access:pro
  • Created:Dec 16, 2024
  • Updated:Jun 9, 2026
  • Type:block

Hero 159 block design & features

Hero159 is a two-column hero built with Shadcn UI where copy sits on the left and a large main photo fills the right column on a muted section background. The text stack includes a display heading, supporting paragraph, and a single rounded primary button with a sliding double-arrow hover animation. An optional byline string can appear beside the button for trust or pricing context.

The main image uses a bordered frame with top-weighted cropping on a muted fill. A square inset card overlaps the bottom-left edge of the photo, positioned outside the main frame toward the copy column with a white surface and light shadow. The layout stays contained with no viewport bleed or extra decorative panels.

The block reads as a straightforward product marketing split with one accent detail in the inset thumbnail. Complexity is moderate and content-driven: one wide hero screenshot plus one square detail image populate the media stack.

On mobile the columns stack with copy above the photo. Padding on the media column keeps the outside inset visible rather than clipped at the section edge.