Product Info Beta

Product Info components represent bank products in George App.
They always feature a Product Avatar and important information for the respective product - like the alias or the current balance.

Product Info components can have different layouts and functionalities, depending on where they are used. Some examples:

Card (Retail Overview)

In the main view of George Retail, Product Info components are used in Card style,
featuring an action bar with a primary action and multiple secondary actions (via the ‘more’ menu)

Open in Figma

Compact Card (Business Overview)

In the main view of George Business, Product Info components are used in a compact Card style,
with optional grouping by category. They don’t have a primary action, instead, all actions are combined in one menu.

Open in Figma

Account Selection

In views where the user is prompted to select one or more of their accounts from a list (example: PIP and FIT) a Product Info component with selection elements is used.
In case only one of many products must be selected by the user, it is best practice to not use dedicated selection components like Radio Buttons. Instead, tapping the Product Info cell should function as selection.

Open in Figma

Header

The new Product Detail design features a new variant of Product Info, that closely resembles the overview card, but the primary action moves from the card to a separate toolbar element at the bottom of the screen.

Open in Figma