NATIVE APP USER INTERFACE ELEMENTS

Headers

Headers

Overview

Headers function as the title of a section or page. Headers help clearly separate and identify sections on the page.

Variations

Usage

Variations

Depending on requirement, header can or cannot have additional links right aligned to the header.  Header should be short, clear, and concise, to keep it in one line. When wrapping in multiple lines, keep it left aligned on screen to avoid running onto right side link or any other container. You can have sub copy below header which provides additional context if required.

Page Headers

Login
Login
Dashboard
Dashboard
Overlay/Take over Screens - on Light BG
Overlay/Take over Screens - on Light BG
Overlay/Take over Screens - on Dark BG
Overlay/Take over Screens - on Dark BG
Secondary page - on Light BG
Secondary page - on Light BG
Secondary page - on Dark BG
Secondary page - on Dark BG

Section Headers

Header - Description and Link
Header - Description and Link
Header - Description and Link
Header - Description and Link
Header - Description and Link on dark bg
Header - Description and Link on dark bg

Usage

Page Header

Page Header

Section Header

Section Header