Object Header
Intro
The object header is essentially 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 object header uses a visually different theme in order to differentiate the object’s header area and content area. The information present in the object header depends on the type of content, and each content has a specific placement within the header.

Usage
Do’s
- Use the object header with short and concise information that is crucial in showing content quickly.
Don’ts
- Do not put detailed or long information in the object header as that belongs in the content area under the header.
Structure
The content that goes into the object header are separated by type and are arranged in a specific order.
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. This can be up to three lines of text.
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. 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.

Mobile
Due to the limited space on a smaller device, the object header contents can be separated into two or more slides if they do not fit in one slide. 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.

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.

Tablet – Landscape
For tablet on landscape, there are no slides and all of the content are assembled on the same object header.

Priority Blocks (Tablet Landscape Only)
There are three priority areas for tablet landscape layout, in which attribute takes highest priority, description/KPI takes second priority, and the object name, additional information, and image are third.

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
With KPI & Description, No Additional Information
If there is a KPI, it must go on a separate slide. If there is a description but no additional information, then the description may exist in the same slide with name and image.

No Attribute
If there is no attribute, then the object name and additional information may extend to the keyline on the right side.

Chart Header
If there is a chart header, additional content such as an object image, title, description, and status must be placed on a separate slide.

Tablet – Portrait
No Attribute
Similarly to mobile, if there is no attribute, then the object name and additional information may extend to the keyline on the right side.

Chart Header
On portrait tablet, the chart header width increases but follows the same logic as mobile in which the chart must go on a separate slide from the other content types.

Tablet – Landscape
With KPI & Description, No Additional Information
A KPI and description may exist side by side if there is no additional information.

No KPI & No Description
If there are no KPI and description, then the additional information may be moved to priority block 2.

Chart Header
On tablet landscape, the chart header may be placed side by side with other content types.

Mobile & Tablet
No Image
If there is no image, the layout does not change as the alignment with the keylines must be preserved.

Behavior
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.
Specs
App Bar
Object Header with Main Content
Object Header with Description
Object Header with KPI
Caption & Pagination
Main Colors
Sample | Element | Alpha Hex |
|
Header background | #354A5F |
|
Object title text, object name text, subheading text, footnote text | #FFFFFF |
|
Tag background | #FFFFFF |
|
Tag text | #6A6D70 |
|
Slides indicator (active) | #FFFFFF |
|
Slides indicator (inactive) | #80FFFFFF or #FFFFFF with 50% opacity |
Attribute
Sample | Element | Alpha Hex |
|
Negative semantic color | #FFBBBB |
|
Critical semantic color | #FCD295 |
|
Positive semantic color | #98DB98 |
|
Neutral semantic color | #D3D7D9 |