OverviewCard

OverviewCard is used to display a product (or other information) on the George overview dashboard.

HINT The CRM promotions in the Overview are using OverviewPromoCard.

OverviewCard supports dual currencies, see dual currencies example.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Rules For Developers

Don’t use the backgroundColor prop
Don’t use anything other than Avatar in the avatar slot
When using color prop, Avatar should be set to the BORDERLESS variant and have apropriate *_STRONG and *_WEAK color and backgroundColor set respectively

Shadow promotion

Shadow promotion is a special use case of OverviewCard, which — instead of displaying a product or providing access to a feature – promotes something instead.

CAUTION These promotions come from George instead of the CRM. There is another component for CRM promotions – OverviewPromoCard.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Rules For Designers

Unlike regular OverviewCards, shadow promotions can use background colours
Shadow promotions can’t use the colour decoration
Shadow promotions can use an image

Rules For Developers

Don’t use the color prop in shadow promotions
An Animation may be used in the avatar slot
Put text content in the extraAmounts slot, do not pass it as children