1. What does the module do?

• The module is used for orientation and navigation.

2. When should the module be used?

• The module appears on every page directly beneath the status bar.

3. Rules

• The header consists of the navigation icon (‘menu icon’, ‘cross’ or ‘arrow to the left’), title and signet.
• The ‘menu icon’ opens the menu.
• The ‘arrow to the left’ navigates back to the previous page.
• The ‘cross’ closes the page displayed.
• The title describes the content of the function/page.
• The signet is linked to the homepage.

4. Variants

• without navigation, with icon (Chevron) with text (Cancel)
• iOS and android
• Size: default/small
• with and without toggle

4.1 without navigation

4.1.1 Default

4.1.2 Default with toggle

4.1.3 Small

4.1.4 Small with toggle

4.2 with icon

4.2.1 Default

4.2.2 Default with toggle

4.2.3 Small

4.2.4 Small with toggle

4.3 with text

4.3.1 Default

4.3.2 Default with toggle

4.3.3 Small

4.3.4 Small with toggle

Design Specification

Figma-Link