Product Card - React
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>
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>
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>
Wrapper
ProductCard is the wrapping element, it supports a variety of "Blocks".
<ProductCard $appearance="products.mobile" $maxWidth="380px" />
Props and System Props
For a full list of props see Card.
Highlight
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'
Header
Product Title
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
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
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
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.
Legals
Props
Content
For a full list of props see Markdown.