Deal Card - React

View on Figma View on GitHub

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

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

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

<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

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

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

This subcomponent is using the same props as Tag component, except $variant and src props

DealCard.Price

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

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	true	Defines if the countdown should have seconds or not

Bestseller Deal Card

Deal Card with every optional option turned on.

<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)} />
    <DealCard.Button href="https://sky.com">
      Descriptive Button
    </DealCard.Button>
  </DealCard>

<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)} />
    <DealCard.Button href="https://sky.com">
      Descriptive Button
    </DealCard.Button>
  </DealCard>

Multiple Deal Cards

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.

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

<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

System Modifiers

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