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

# Product Card — React

Product Card is used to display product information and present potential product-based actions.

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

Product Card is used to display product information and present potential product-based actions. It always has at least one action associated with it, and the option to show additional offers and pricing choices.

## Examples

### Standard

```tsx
<ProductCard $maxWidth="420px">
  <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" alt="" />

  <ProductCard.Header
    heading="Product Name"
    cta={{ text: 'Learn more', href: '#' }}
    media={{ src: 'https://placehold.co/48x48/cccccc/4a4a4a?text=Logo' }}
  />

  <ProductCard.Details content="Lörem ipsum stenoliga homorebel i rejäligen och segt, fastän semimett trumpifiering askade prerade." />

  <ProductCard.Pricing>
    <ProductCard.PricingItem
      disclaimer="for 18 months"
      price="£X.XX"
      suffix="a month"
      cta={{ text: 'Add', 'aria-label': 'Add PRODUCT NAME to basket' }}
    />
  </ProductCard.Pricing>

  <ProductCard.Legals content="This is a test" />
</ProductCard>
```

### Multiple Options

```tsx
<ProductCard $maxWidth="420px">
  <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" alt="" />

  <ProductCard.Header
    heading="Product Name"
    cta={{ text: 'Learn more', href: '#' }}
    media={{ src: 'https://placehold.co/48x48/cccccc/4a4a4a?text=Logo' }}
  />

  <ProductCard.Details content="Lörem ipsum stenoliga homorebel i rejäligen och segt, fastän semimett trumpifiering askade prerade." />

  <ProductCard.Pricing>
    <ProductCard.PricingItem
      disclaimer="for 6 months"
      price="£X.XX"
      suffix="a month"
      cta={{ text: 'Add', 'aria-label': 'Add PRODUCT NAME for 6 months to basket' }}
    />
    <ProductCard.PricingItem
      disclaimer="for 12 months"
      price="£X.XX"
      suffix="a month"
      cta={{ text: 'Add', 'aria-label': 'Add PRODUCT NAME for 12 months to basket' }}
    />
    <ProductCard.PricingItem
      disclaimer="for 18 months"
      price="£X.XX"
      suffix="a month"
      cta={{ text: 'Add', 'aria-label': 'Add PRODUCT NAME for 18 months to basket' }}
    />
  </ProductCard.Pricing>

  <ProductCard.Legals content="This is a test" />
</ProductCard>
```

### With offer

```tsx
<ProductCard $maxWidth="420px">
  <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" alt="" />

  <ProductCard.Header
    cta={{ text: 'Learn more', href: '#' }}
    heading="Product Name"
    media={{ src: 'https://placehold.co/48x48/cccccc/4a4a4a?text=Logo' }}
  />

  <ProductCard.Details content="Lörem ipsum stenoliga homorebel i rejäligen och segt, fastän semimett trumpifiering askade prerade." />

  <ProductCard.Pricing>
    <ProductCard.PricingItem
      cta={{ text: 'Add', 'aria-label': 'Add PRODUCT NAME for 18 months to basket' }}
      disclaimer="for 18 months"
      price="£X.XX"
      suffix="a month"
    />
  </ProductCard.Pricing>

  <ProductCard.Offer
    cta={{ text: 'Learn more', href: '#' }}
    heading="Alternative Product Name"
    media={{ src: 'https://placehold.co/48x48/cccccc/4a4a4a?text=Logo' }}
    offerTitle="Exclusive Offer"
  >
    <ProductCard.OfferItem
      cta={{ text: 'Add', 'aria-label': 'Add OFFER NAME to basket' }}
      disclaimer="for 6 months"
      price="£X.XX"
      suffix="a month"
    />
    <ProductCard.OfferItem
      cta={{ text: 'Add', 'aria-label': 'Add OFFER NAME to basket' }}
      disclaimer="for 12 months"
      price="£X.XX"
      suffix="a month"
    />
  </ProductCard.Offer>

  <ProductCard.Legals content="This is a test" />
</ProductCard>
```

## Wrapper

`ProductCard` is the wrapping element, it supports a variety of "Blocks".

```tsx
<ProductCard $appearance="products.mobile" $maxWidth="380px" />
```

### Props and System Props

For a full list of props see [Card](/components/card/react/).

---

## Highlight

### Props and System Props

For a full list of props see [Highlight](/components/highlight/react/).

---

## Image

### Props and System Props

For a full list of props see [Image](/components/image/).

### Default Props

- **$aspectRatio**: `'4/3'`
- **$borderTopRadius**: `1`
- **$objectFit**: `'cover'`

---

## Header

### Props

#### `cta`

The `cta` prop supports an object which represents the link below the heading:

```jsx
cta={{
  href: 'URL',
  onClick: someFunction(),
  text: 'Add',
  'aria-label': "Add PRODUCT to basket"
}}
```

#### `heading`

String representing the product name.

#### `media`

For a full list of props see [Image](/components/image/).

---

## Details

### Props

#### `content`

For a full list of props see [Markdown](/components/markdown/react/).

#### `cta`

The `cta` prop supports an object which represents the link below the heading:

```jsx
cta={{
  href: 'Link URL to new page if required',
  onClick: someFunction(),
  text: 'Link text to be displayed'
}}
```

---

## Pricing

`ProductCard.Pricing` expects between 1 and 3 `ProductCard.PricingItem` elements as children. When more than 1 `ProductCard.PricingItem` is provided, each will be nested in a Card and displayed in a responsive grid.

### `ProductCard.PricingItem` Props

Supports the [Price](/components/price/react/) component props along with:

#### `cta`

The `cta` prop supports an object which represent the specific Pricing CTA:

```jsx
cta={{
  href: 'Link URL to new page if required',
  onClick: someFunction(),
  text: 'Link text to be displayed'
}}
```

#### `disclaimer`

The `disclaimer` prop supports a string containing additional legal information.

---

## Offer

`ProductCard.Offer` expects between 1 and 3 `ProductCard.OfferItem` elements as children. When more than 1 `ProductCard.OfferItem` is provided, each will be nested in a Card and displayed in a responsive grid.

### `ProductCard.Offer` Props

#### `cta`

The `cta` prop supports an object which represents the link below the heading:

```jsx
cta={{
  href: 'Link URL to new page if required',
  onClick: someFunction(),
  text: 'Link text to be displayed'
}}
```

#### `offerTitle`

String representing offer heading (such as "Exclusive offer" etc).

#### `heading`

String representing the product name.

#### `media`

For a full list of props see [Image](/components/image/).

### `ProductCard.OfferItem` Props

Supports the [Price](/components/price/react/) component props along with:

#### `cta`

The `cta` prop supports an object which represent the specific Pricing CTA:

```jsx
cta={{
  href: 'Link URL to new page if required',
  onClick: someFunction(),
  text: 'Link text to be displayed'
}}
```

#### `disclaimer`

The `disclaimer` prop supports a string containing additional legal information.

---

## Legals

### Props

#### Content

For a full list of props see [Markdown](/components/markdown/react/).