Avatar

An Avatar is used to show a visual thumbnail representation of individuals, products and entities or certain categories and states in the interface.

Rules For Android

Use CircularImage
Size should be defined by Modifier.size().
There are predefined dimensions like headerImageSize(64dp) or avatarImageSize(40dp) in GeorgeTheme.dimensions or use hardcoded values.

Size

Avatars can be rendered in one of three pre-defined sizes - Small, Medium or Large.

Avatar components in G-App are separated by semantic use cases, the following types are available:

Product

Used in components and elements that represent a product, this can be either a default icon assigned initially, or a custom image provided by the user.
There are also special types for credit cards, for which George shows the vendor logo by default; and for the “edit” view of a product, which prompts the user to upload an image.

Tokens

Avatar - Product	Token
icon	`color.fill.primary`
border	`color.fill.quaternary`
customize-fill	`overlay.soft`

Transaction

Used in components that represent an order, a payment or a transaction. This can either be a default icon based on the category, or a merchant logo from our database.

Tokens

Avatar - Transaction	Token
icon	`color.fill.tertiary`
border	`color.fill.quaternary`

Person

Used in components that represent another person, like in the address book or in the messaging features of George. This type can either have a custom image (photo), a default user icon, oor the initials of the entity, if it is technically possible to extract & render them.

Tokens

Avatar - Person	Token
icon	`color.fill.tertiary`
border	`color.fill.quaternary`
initials	`color.state.info`
initials-fill	`color.state.info.weak`

State

Used in components that represent an alert state, currently used for so called Bank Messages in George. This type can either be used in “info” or “warning” state.

Tokens

Avatar - State	Token
icon-info	`color.state.info`
fill-info	`color.state.info.weak`
icon-warning	`color.state.warning`
fill-warning	`color.state.warning.weak`