Skip to main content
Version: v3

Title bar

The title bar is located at the top of the page and is used to inform the user of the current page information.

Design

Type​

  • Regular Page Title Bar: Includes the main title and corresponding auxiliary information (if there's any).

Design

  • List Page Title Bar: Includes the main title and corresponding auxiliary information (if there's any).

Design

Visual Guidelines​

  • The text on the regular page title bar is positioned at a fixed height of ➀ from the top, and the maximum height of the title bar is ②, which includes two lines for the main title and one line for auxiliary information. If the text length exceeds two lines, it will be displayed in a single-line scrolling.

Design

  • The overall height of the list title bar ➀ is fixed, and the title text is dynamically centered vertically within the overall height. If the length of the text exceeds two lines, it will be displayed in a single-line scrolling.

Design