ProductCard Beta
ProductCard is used to showcase products, or the state of an ongoing process. It comes in three variants: Plugin, Teaser, and large Teaser.
Similar to OverviewCards, ProductCards are not related to regular Cards and FunctionCards. Therefore, they cannot be combined with those inside a CardGroup. Instead, they live on their own, or are part of a Grid.
Plugin
The Plugin variant is the only one shown in horizontal orientation (at least on tier MD and above), and is the successor of ActivatedPluginCard. It is used to present products in a category, and when displaying a customer’s open applications.
Rules For Developers
- When adding blocks to the body content, limit yourself to small Paragraphs, compact LabeledLists, and medium-sized Alerts without a heading.
- If no
variantis set, it defaults to this Plugin variant.
Teaser
The two other variants are used as teaser ads for products in the George Store. In both sizes they have a fixed height, and usually a number of them are placed next to each other in a grid.
Rules For Developers
- When adding blocks to the body content, use a single small Paragraph.
- The colored indicator either contains an
icon, or an image via theindicatorprop. While an icon (and by default an image) is always displayed centred, an image can also cover the entire indicator, ifindicatorCoveris set to true.
Large Teaser
While regular and large teaser cards look alike on tiers XS and SM, you’ll start to notice why they are called “large” when viewing them on tiers MD and above.