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.
Rules For Designers
- Avatars are always 48px in size.
- Horizontal spacing between the Avatar and the description is 10px.
- Product Type and Product Number have a font size of 14px.
- Unless stated otherwise, lines with text do not break and will be ellipsed if too long.
- If the text is not ellipsed, the line-height of the description is reduced to achieve a denser look and feel within the individual parts; margins surrounding the individual parts are tweaked to compensate for the reduced line-height.
- In vertical ProductInfos, the Avatar is top-aligned with the first line of text.
- The font size of Amounts is slightly larger and has, therefore, superscript fractions.
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:
Rules For Designers
- Amounts are taken out of the regular flow and are placed to the right, so they act as a third column next to the image and the other parts of the description.
- This is only partly true in tier
XS. While the amounts are taken out of the flow, they are placed below the other parts of the description.
- This is only partly true in tier
- All columns are vertically centred.
- Text in the 3rd column is right-aligned and won’t be truncated, so it reduces the width available for the 2nd column.
- Negative top/bottom margins are applied to the line of text containing Badges, to achieve the same height as Product Type and Product Number.
- In tiers
MDand below, the font size of amounts is reset to the original size (same as Product Alias) and has, therefore, no longer superscript fractions. - Other than that, standard ProductInfo rules apply.
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.
Rules For Designers
- The presence of a ProductInfo before the Side Navigation enforces a 20px wide gap between the two.