Promotion
PromoBanner
Promotional banner with countdown timer, discount display, and CTA.
PromoBanner
A hero-style promotional banner with optional background image, countdown timer, discount percentage, description, and call-to-action button.
Preview
30% OFF
Summer Sale
00d
00h
00m
00s
Usage
<CPromoBanner
title="Summer Sale"
:discount="30"
description="Up to 30% off on all summer items"
cta-label="Shop Now"
cta-to="/collections/summer"
:end-date="new Date('2024-08-31')"
/>
Minimal
<CPromoBanner title="Free Shipping" description="On orders over SAR 100" />
With Background Image
<CPromoBanner
title="New Collection"
:background-image="'/images/hero-banner.jpg'"
cta-label="Explore"
cta-to="/new"
/>
Without Countdown
<CPromoBanner
title="Flash Deal"
:discount="50"
:show-countdown="false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Banner title |
description | string | — | Description text |
discount | number | — | Discount percentage (e.g., 30) |
endDate | Date | string | — | Countdown target date |
showCountdown | boolean | true | Show countdown timer |
ctaLabel | string | — | Button label |
ctaTo | string | — | Button link |
backgroundImage | string | — | Background image URL |
variant | 'solid' | 'gradient' | 'image' | 'gradient' | Visual style |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
click | — | CTA button clicked |
expired | — | Countdown reached zero |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
title | { title } | Custom title rendering |
countdown | { days, hours, minutes, seconds } | Custom countdown display |
discount | { percent } | Custom discount display |
actions | — | Custom action buttons |