Product Card - React

View on Figma View on GitHub

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

<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>

<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

<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>

<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

<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>

<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".

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

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

Props and System Props

For a full list of props see Card.

Highlight

Promotion

Props and System Props

For a full list of props see Highlight.

Image

Props and System Props

For a full list of props see Image.

Default Props

$aspectRatio: '4/3'
$borderTopRadius: 1
$objectFit: 'cover'

Product Title

Learn more

Props

`cta`

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

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.

Details

Full Markdown support to allow for text formatting and lists etc.

Item 1
Item 2
Item 3

Learn more

Props

`content`

For a full list of props see Markdown.

`cta`

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

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

Pricing

for 18 months

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 component props along with:

`cta`

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

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

Exclusive Offer

Alternative Product Name

for 18 months

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:

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.

`ProductCard.OfferItem` Props

Supports the Price component props along with:

`cta`

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

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.

Product Card - React

Examples

Standard

Multiple Options

With offer

Wrapper

Props and System Props

Highlight

Props and System Props

Image

Props and System Props

Default Props

Header

Product Title

Props

cta

heading

media

Details

Props

content

cta

Pricing

ProductCard.PricingItem Props

cta

disclaimer

Offer

ProductCard.Offer Props

cta

offerTitle

heading

media

ProductCard.OfferItem Props

cta

disclaimer

Legals

Props

Content

`cta`

`heading`

`media`

`content`

`cta`

`ProductCard.PricingItem` Props

`cta`

`disclaimer`

`ProductCard.Offer` Props

`cta`

`offerTitle`

`heading`

`media`

`ProductCard.OfferItem` Props

`cta`

`disclaimer`