---
title: "Deal Card — React"
canonical: https://sky-ui.cf.sky.com/components/deal-card/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Deal Card — React

Deal Cards show product offerings, and directing users to the respective purchase journey.

```js
import { DealCard } from '@sky-uk/ui-core';
```

Deal Cards show product offerings, and directing users to the respective purchase journey.

```tsx
  <DealCard>
    <DealCard.ProductTitle content="Product Title" />
    <DealCard.Price
      price="£XX"
      suffix="a month"
    />
    <DealCard.Button href="https://sky.com">
      Descriptive CTA
    </DealCard.Button>
  </DealCard>
```

## Props

### DealCard.Bestseller

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.Button

**Note:** This subcomponent is using the same props as{' '}
  Button{' '}
  component

### DealCard.Category

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.FeeWaiver

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.Image

**Note:** This subcomponent is using the same props as{' '}
  Image{' '}
  component

### DealCard.Legals

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop expects either a `string` or `Markdown` to be rendered as the description text. |

### DealCard.OfferTag

**Note:** This subcomponent is using the same props as{' '}
  Tag{' '}
  component, except `$variant` and `src` props

### DealCard.Price

**Note:** This subcomponent is using the same props as{' '}
  Price{' '}
  component, except `$inlinePrefix` and `$inlineSuffix` props

### DealCard.PriceValue

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.ProductTitle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |
| $headingLevel | string | h3 | The `$headingLevel` prop allows you to set the heading level of the `ProductTitle`. This is useful for accessibility and SEO purposes. |

### DealCard.RTB

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.Saving

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.SpecialOffer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop requires a `string`. |

### DealCard.ThumbnailListItem

**Note:** This subcomponent is using the same props as{' '}
  Card{' '}
  component, except `$aspectRatio`, `$selected`, `$theme`, `disabled`, `readOnly`, and `href` props

### DealCard.Validity

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| endTime | Date | null or undefined | The target date/time at which the countdown ends |
| showSeconds | boolean | false | Defines if the countdown should have seconds or not |

## Bestseller Deal Card

Deal Card with every optional option turned on.

```tsx
  <DealCard>
    <DealCard.Bestseller content="Best Seller" />
    <DealCard.Image src="https://placehold.co/2100x900/png" alt="Deal Card Image" />
    <DealCard.Category content="Category" />
    <DealCard.OfferTag label="OfferTag" />
    <DealCard.Legals content="Simple Legals" />
    <DealCard.ProductTitle content="Product Title" />
    {new Array(5).fill(null).map((_, index) => (
      <DealCard.ThumbnailListItem
        key={index}
        src="https://placehold.co/80x80/png"
        alt="Product Image"
        as="button"
        onClick={() => console.log('clicked')}
      />
    ))}
    <DealCard.RTB content="It's beneficial to have a good RTB" />
    <DealCard.FeeWaiver content="No upfront fees" />
    <DealCard.PriceValue content="Best price" />
    <DealCard.Saving content="£100" />
    <DealCard.Price
      disclaimer="This is a disclaimer"
      prefix="From"
      price="£20"
      strikethroughPrice="£30"
      suffix="a month"
    />
    <DealCard.SpecialOffer content="Special offer description" />
    <DealCard.Validity endTime={new Date(Date.now() + 1000 * 60 * 60 * 24 * 4)} showSeconds />
    <DealCard.Button href="https://sky.com">
      Descriptive Button
    </DealCard.Button>
  </DealCard>
```

## Multiple Deal Cards

**Note:** Do not place multiple `DealCard` components inside any layout method other than `Grid`, as it may
  result in incorrect rendering or layout issues. The `Grid` component ensures proper alignment and
  spacing of the subcomponents.

```tsx
    <Grid $gridTemplateColumns="repeat(3, 1fr)" $columnGap={6}>
      <DealCard>
        <DealCard.Image src="https://placehold.co/2100x900/png" alt="Deal Card Image" />
        <DealCard.ProductTitle content="Product Title" />
        <DealCard.Category content="Category" />
        <DealCard.Price
          price="£XX"
          suffix="a month"
        />
        <DealCard.Button href="https://sky.com">
          Descriptive CTA
        </DealCard.Button>
      </DealCard>
      <DealCard>
        <DealCard.Bestseller content="Best Seller" />
        <DealCard.Image src="https://placehold.co/2100x900/png" alt="Deal Card Image" />
        <DealCard.ProductTitle content="Product Title" />
        <DealCard.Category content="Category" />
        <DealCard.RTB content="It's beneficial to have a good RTB" />
        <DealCard.Price
          price="£XX"
          suffix="a month"
        />
        <DealCard.Button href="https://sky.com">
          Descriptive CTA
        </DealCard.Button>
      </DealCard>
    </Grid>
```

## Translatable Fields

The `Deal Card` support translation on the following fields:

| Translation | Description |
| --- | --- |
| `dealCard.save` | content of the Saving subcomponent |
| `countdown.endsIn` | text of when the countdown ends |
| `countdown.ends` | visually hidden text of when the countdown ends |
| `countdown.days` | text of how many days are left |
| `countdown.hours` | text of how many hours are left |
| `countdown.minutes` | text of how many minutes are left |
| `countdown.seconds` | text of how many seconds are left |

For more on translatable fields, view the `useTranslation` docs here: [useTranslation](/core/hooks/use-translation/)

## System Modifiers

The `DealCard` component also supports the props applied using the following system modifiers:

- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)