OverviewCard Beta
Open in Storybook Open in Figma
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.
Rules For Developers
- Don’t use the
backgroundColorprop - Don’t use anything other than Avatar in the
avatarslot - When using
colorprop, Avatar should be set to theBORDERLESSvariantand have apropriate*_STRONGand*_WEAKcolorandbackgroundColorset 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.
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
colorprop in shadow promotions - An Animation may be used in the
avatarslot - Put text content in the
extraAmountsslot, do not pass it as children