UI Launch

OfferCard component from the UILaunch design system. Displays promotional product offers with image, name, and price in a styled card layout.

🃏 OfferCard

The OfferCard component presents an offer with its name, product name, price, and cover image. It is a styled wrapper around the Card component with a visual emphasis on the product and offer data. Supports multiple size variants.

offer-card-preview

📦 Import

import OfferCard, { OfferCardVariants } from '@madefordevs1999/ui-launch-native/system/templates/OfferCard';

🧩 Usage

import OfferCard, { OfferCardVariants } from '@madefordevs1999/ui-launch-native/system/templates/OfferCard';

const offer = {
  id: '1',
  cover: 'https://pixabay.com/get/g58f6298daec5a9082d06c89a1aa662e266f7a4ff2156e193a3bbce1410e3e58e4253075796d108ff7493ced630f8954f035248a0e754c647e603da1793b883398619ee3c7fa0b0ec80395c7687a057f5_640.jpg',
  name: '20% OFF',
  product: {
    id: '123',
    name: 'Spicy Tacos',
    price: 9.99,
  },
};

const Example: React.FC = () => (
  <OfferCard offer={offer} variant={OfferCardVariants.MEDIUM} />
);

export default Example;

Results

offer-card-example

📜 OfferCard Props

Prop Name	Type	Default	Description
`offer`	`Offer`	—	Offer data object including name, product and image.
`variant`	`'small' \| 'medium'`	`'medium'`	Defines the size/style of the card. Optional.
`...rest`	`Omit<CardProps, 'sourceCover' \| 'renderCover' \| 'content'>`	—	Any additional props accepted by `Card`.

🧩 Offer Interface

interface ProductOffer {
  id: string;
  name: string;
  price: number;
}

interface Offer {
  id: string;
  cover: string;
  name: string;
  product: ProductOffer;
}

🧮 Variants

You can use the OfferCardVariants enum for easier variant management:

export enum OfferCardVariants {
  SMALL = 'small',
  MEDIUM = 'medium',
}

SMALL: Renders the card in a compact form (164x134).
MEDIUM: Renders the card in a medium form (200x164).

OfferCard