Promo Banner 8 - Promo Banner Trio

Pro

Three tall image banners for sunglasses promotions, each with an offer line, a serif headline and an underlined call to action, with the middle banner using a larger sale headline. Hovering a banner lightens its overlay while the other two dim.

Shadcn Promo Banner 8 block

Component data

ID
promo-banner8
Access
pro
Created
Nov 11, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Promo Banner 8 block design & features

The block shows three portrait banners side by side. Each one has a full-bleed photo under a light dark overlay, a small uppercase offer line at the top, a large uppercase serif headline and an underlined link near the bottom. The middle banner is a featured variant with a bigger sale headline in a deep red and a short line of copy under it. Hovering a banner lightens its overlay while the other two darken, so the one under the pointer stands out. It is built with shadcn/ui.

Each banner's offer line, headline, optional summary, image, link and call to action are props, and the featured style is applied to the second banner. Between the large and extra large breakpoints the row becomes a carousel so the banners keep their width.

Below the large breakpoint the banners stack in a single column.