PromotionCard
PromotionCard component of the UILaunch design system, how to import it and its usage.
🎁 PromotionCard
The PromotionCard component displays a promotional offer with an image background, title, description, and pricing information. It supports interactivity and different sizes, making it ideal for marketing banners, special offers, and promotional content. It also supports displaying discounts by showing both the original and discounted price.
📦 Import
import PromotionCard from '@madefordevs1999/ui-launch-native/system/templates/PromotionCard';🧩 Usage
import PromotionCard, { PromotionCardSizes } from '@madefordevs1999/ui-launch-native/system/templates/PromotionCard';
const examplePromotion = {
id: 'promo_001',
title: 'Summer Sale',
description: 'Enjoy up to 50% off on selected items!',
image: 'https://cdn.pixabay.com/photo/2021/12/16/11/08/mount-fuji-6874364_1280.jpg',
prices: {
originalPrice: 199.99,
discountPrice: 99.99,
},
};
const App = () => {
return (
<PromotionCard
size={PromotionCardSizes.Medium}
promotion={examplePromotion}
onPress={(promotionId) => console.log('Promotion pressed:', promotionId)}
/>
);
};
export default App;🎯 Result Example
📜 PromotionCard Props
| Prop Name | Type | Default Value | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'small' | The size of the card. Affects typography and layout. |
promotion | PromotionInfo | — | The promotion information to display (title, description, image, prices). |
onPress | (promotionId: string) => void | Promise<void> | undefined | Function triggered when the card is pressed. Receives the promotion ID. |