ProductCard Beta

Open in Storybook

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

Open in Figma

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.

Loading demo…

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 variant is set, it defaults to this Plugin variant.

Teaser

Open in Figma

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.

Loading demo…

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 the indicator prop. While an icon (and by default an image) is always displayed centred, an image can also cover the entire indicator, if indicatorCover is set to true.

Large Teaser

Open in Figma

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.

Loading demo…