Product Card

Overview

Purpose

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.

Anatomy

<Grid
  $gridTemplateColumns="repeat(auto-fit, minmax(min(280px, 100%), 1fr))"
  $columnGap={5}
  $gridTemplateRows="auto 1fr auto"
>
  <ProductCard>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />
    <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="£8.00" suffix="a month" cta={{ text: 'Add'}}  />
    </ProductCard.Pricing>

    <ProductCard.Legals>This is a test</ProductCard.Legals>
  </ProductCard>

  <ProductCard>
    <ProductCard.Highlight>Test</ProductCard.Highlight>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />

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

    <ProductCard.Details content={`
Based on your chosen *Sky Glass package*, you need a **10 Mb/s minimum download speed**.

- first item
- second item
- third item
  `} />
    <ProductCard.Pricing>
      <ProductCard.PricingItem disclaimer="for 6 months" price="£X.XX" suffix="a month" cta={{ text: 'Add'}}  />
      <ProductCard.PricingItem disclaimer="for 12 months" price="£X.XX" suffix="a month" cta={{ text: 'Add'}}  />
    </ProductCard.Pricing>

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

  <ProductCard>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />
    <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'}}  />
    </ProductCard.Pricing>

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

<Grid
  $gridTemplateColumns="repeat(auto-fit, minmax(min(280px, 100%), 1fr))"
  $columnGap={5}
  $gridTemplateRows="auto 1fr auto"
>
  <ProductCard>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />
    <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="£8.00" suffix="a month" cta={{ text: 'Add'}}  />
    </ProductCard.Pricing>

    <ProductCard.Legals>This is a test</ProductCard.Legals>
  </ProductCard>

  <ProductCard>
    <ProductCard.Highlight>Test</ProductCard.Highlight>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />

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

    <ProductCard.Details content={`
Based on your chosen *Sky Glass package*, you need a **10 Mb/s minimum download speed**.

- first item
- second item
- third item
  `} />
    <ProductCard.Pricing>
      <ProductCard.PricingItem disclaimer="for 6 months" price="£X.XX" suffix="a month" cta={{ text: 'Add'}}  />
      <ProductCard.PricingItem disclaimer="for 12 months" price="£X.XX" suffix="a month" cta={{ text: 'Add'}}  />
    </ProductCard.Pricing>

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

  <ProductCard>
    <ProductCard.Image src="https://placehold.co/800x600/cccccc/4a4a4a?text=Product+Image" />
    <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'}}  />
    </ProductCard.Pricing>

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