CommercePromo
Featured-deal promo banner: heading + subcopy + CTA + media, with image-left, image-right, or overlay layouts. Drop it between catalog sections to surface a sale, new collection, or seasonal campaign. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add commerce-promoUsage
import { CommercePromo } from "@/components/ui/commerce-promo"Image-right seasonal promo
Headline, subcopy, CTA, and lifestyle image.
import { CommercePromo, Button } from "@hex-core/components";
<CommercePromo
eyebrow="Limited time"
title="Summer collection — 20% off"
description="New canvas totes, in five new colors. While they last."
actions={<Button size="lg">Shop the collection</Button>}
media={<img src="/promos/summer.jpg" alt="Summer canvas totes in lifestyle setting" />}
/>Variant values
variantLayout.| Value | Description |
|---|---|
image-rightdefault | Copy left, image right on ≥lg. |
image-left | Image left, copy right on ≥lg. |
overlay | Copy layered over full-bleed media. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | Promo headline. |
description | ReactNode | — | Supporting subcopy below the title. |
actions | ReactNode | — | Call-to-action buttons. Pass one or more <Button>. |
media | ReactNode | — | Promo media (illustration / screenshot / lifestyle image). |
eyebrow | ReactNode | — | Optional eyebrow above the title. |
variant | enum | image-right | 'image-right' (default), 'image-left' (flipped), or 'overlay' (copy layered over media full-bleed). |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use to feature a sale, new collection, or campaign on the storefront. 'image-right' / 'image-left' for product-led promos; 'overlay' when the image alone tells the story.
When not to use
Don't use as the only thing on a page (use commerce-product-grid for catalog). Don't stack multiple promos in a row — competing CTAs dilute conversion.
Common mistakes
- Using variant='overlay' with low-contrast media — the copy renders on top in primary-foreground; check the foreground contrast against your photo.
- Forgetting alt text on the promo image, especially for variant='overlay' where the image is decorative-ish but still informative.
- Lifestyle imagery cropped wrong for the aspect — supply imagery sized for a wide hero band.
Accessibility
Section title is <h2>. Media images need alt text describing the promo, even in overlay variant. Overlay copy uses primary-foreground; check contrast against your photo via a manual audit.
Related components
Token budget: 1081
Verified against @hex-core/components@1.14.0