Object Header
Intro
The object header is a quick view of the more relevant and important content of a particular object. It’s based on the prominent app bar from Material Design where the app bar is extended to accommodate more content. The information present in the object header depends on the type of content, and each content has a specific placement within the header.

Object header with two pages on mobile (left) and on tablet landscape (right)
Anatomy
The content that goes into the object header are separated by type and are arranged in a specific order.
Mobile, Tablet Portrait and Landscape
A. Title
A title for the object page should be short so that the text does not get truncated within the app bar. It should encompass what is being outlined within the object page.
B. Image (optional)
A 40dp x 40dp image that represents the object for the user to easily identify.
C. Name
This is different from the title in which it can be longer and more descriptive. This should be descriptive so that the user knows exactly what this object is.
D. Attribute (optional)
Shows pertinent information about the object, for example, can shows the priority or urgency of the object’s status.
E. Subheading (optional)
Subheading may provide more context for the object with information such as ID, type, etc.
F. Tags (optional)
Tags are identifiers of the categories for the object.
G. Footnotes (optional)
Footnotes include text that may list secondary details about the object, such as location, due date, etc.. If there are no footernotes and the description (H) is a short text, it also can be placed here.
H. Description (optional)
Description blocks allow for longer text which can inform the user in more detail about this specific object.
I. KPI (optional)
Shows relevant trends or status for that object.
J. Chart (optional)
Shows a visualisation of different charts types for that object.
K. Pagination
Pagination only exists on mobile and tablet on portrait mode since they support slides of content. If the content must use 2 or more slides, then the pagination uses dots to indicate how many slides there are and which slide is being displayed. It is non-interactive and it is solely an indicator.

Object header on mobile and tablet portrait
Variations
The layout for object header varies based on what content is being included and what device in what orientation the user is using.
Mobile
Due to the limited space on a smaller device, the object header contents can be separated into two or more slides. All of the slides of a specific object header must match the height of the tallest slide to keep the UX consistent and prevent content from moving up and down.
A. Main Information
B. Description
C. KPI
D. Chart

Variations of object header on mobile
Tablet
There are two layouts for tablet depending on device orientation.
Tablet Portrait
Object headers on portrait tablet behaves similarly to the mobile layout in that the contents is divided into slides.
A. Main Information
B. Description
C. KPI
D. Chart

Variations of object header on tablet portrait
Tablet Landscape
For tablet on landscape, there are no slides and all of the content are assembled on the same object header.
A. Main Information
B. Main Information + Description
C. Main Information + KPI
D. Main Information + Chart

Variations of object header with different content on tablet landscape
Behavior and Interaction
Scrolling
Due to the nature of the prominent app bar, if the user scrolls down the screen, the object header gets condensed to the app bar in which it only shows the navigation icon, object title, and any other button in the app bar. If the user scrolls back up, then the full object header slides out again. This behavior occurs on all devices.