ProductInfo

Open in Storybook Open in Figma

An Avatar of a product (an account, a card, insurance, …) with vital information next to it (e.g. balance, alias, IBAN, …) is called ProductInfo. They are used on overview cards, lists, product DropDowns, and can even be found in the top and side navigation.

See the ProductInfo examples for examples.

Basics

ProductInfos are created by adding lines to a .g-product-info container. The line types are the building blocks for the main part of the ProductInfo. You can mix-and-match any of those, but usually, certain products require a certain order of lines/information. See the examples for a complete reference or ask the design team for specifications.

ProductInfos come in two forms, horizontal and vertical. Both have distinct use cases, so you need to specify upfront which one you need, by adding either .g-product-info-horizontal or .g-product-info-vertical. If you omit the qualifier, you’ll get the old variant which is already deprecated. All variants do adapt to the available space, but …

• Horizontal ProductInfos centre their content vertically and are always displayed from left to right we have 1. avatar, 2. product description, and 3. additional info (usually amounts, right-aligned), but no column is mandatory; this type is mainly used in lists.
• Vertical ProductInfos run all their content left-aligned from top to bottom, only the avatar has a designated place on the left and all content is offset to make room for it, even if there is none (which is not encouraged); this type is primarily used as part of an OverviewCard or the side navigation.

In lists

Horizontal ProductInfos can be composed into a list. They follow the same general layout but usually contain only 2 or 3 lines of information.

Create such a ProductInfo by adding the .g-product-info-horizontal modifier class:

Data

The following lines of text can be added to the .g-product-info-data block of ProductInfo. The text inside this block deviates from regular typography. In horizontal ProductInfos, this block represents the 2nd column.

Alias

Add an alias by using the .g-major classes. If an alias should not be truncated and ellipsed, add the .g-no-ellipsis class.

Product type

Add a product type by using a <strong> element with the .g-minor and .g-faded classes. If a product type should not be truncated and ellipsed, add the .g-no-ellipsis class.

Product numbers

IBANs, Card numbers or other product numbers are set using .g-minor and .g-faded and should be wrapped around AccountNumber component.

Badges

You can attach badges to lines or feature them in their own line. Try to avoid the inline variant, as it might become DEPRECATED soon.

See the Badge page for how to set badges.

Additional information

The following lines of text can be added to the .g-product-info-display block of product info. In horizontal ProductInfos, this block represents the 3rd column, which usually contains amounts. But even vertical ProductInfos should not add the amounts to the description block and instead use this block to display amounts, so we can change the look on mobile screens in the future.

Amount

Add an amount by using the .g-amount class and adding a colour by using .g-amount-neutral, .g-amount-positive, .g-amount-negative or g-amount-faded.

With SideNavigation DEPRECATED

If a ProductInfo is preceding the Side Navigation, it will be shown on a grey background.