Layout Deprecated

The basic George page layout consists of the background, the navigation and header area, the content area, and optionally the toolbar.

The navigation and header area holds the navigation Bar (iOS)/App Bar (Android), the header view, and the tab bar. Find out more about the header here.

Content Area

The content area is used for displaying most of the content in George. George uses 3 basic content layout types.

Basic list layout
Basic card layout
Basic text layout

Basic list layout

Lists on Android and tables on iOS are widely used in George. A list or table displays data as a single-column list of cells that can be divided into groups. The list often acts as navigation that allows users to move from a page with a general overview of the content to pages with more details. Find out more about cells & section headers.

Examples for list layout

Basic card layout

The card layout serves as a hub for extensive features such as the Overview, New Transfer or FIT. A hub acts to enable the user to explore different sections of the feature. The card layout allows focused execution through a central hub from that all activities begin and detail pages on which tasks get accomplished. Find out more about cards here.

Examples for card layout

Basic text layout

The text layout is designed for content-heavy pages like the FIT detail pages. Text blocks can be structured into clear sections using dividers.

HINT Text layouts are new to George. A detailed set of rules does not yet exist.

Examples for text layout

Find out more about components used in the content area:

Understanding Backgrounds

App Background

Every basic layout builds upon a grey background. iOS utilizes this background more than Android and lets it shine through more regularly. Examples of this are the section header and the default footer components. iOS places them on grey while Android places them on white.

Surface

A large part of the components in George utilise the surface - e.g. cells and cards. The surface slightly stands out from the app background to have a gentle visual distinction. On Android, most content places on the surface. The result can be that only the end of the screen reveals the grey app background.

Header Background

The Header is where George shows its variety of colors. The default color of the header background is blue. Products like accounts, cards, etc. use custom colors. These are colors for users’ customization. Learn more about the header here.

The toolbar contains buttons for performing actions relevant to the current view. Find out more about the toolbar here.