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.Headerheading="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.Headerheading="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.Headerheading="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.Offerheading="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>