Used at page level for displaying the current item in use, the header bar will show up at the very top of the page, right underneath the Topbar, but will not have a fixed position and instead it will scroll with the rest of the content.
The component itself doesn't have a specific width, instead it takes up the full space of its parent container. It does however have a fixed height of 80px.
A. Item switcher 2. Item name 3. Call to action
B. Date range 4. Range name 5. Range value
https://invis.io/R9YNS1L8VMW#/430716326_Header_Bar_-_Anatomy
The button on the left should use an icon that is representative of the type of item in use:
https://invis.io/C9YNS1X457D#/430716327_Header_Bar_-_Examples
When hovering the header bar on a subpage, the button icon should change to an arrow to show that backwards navigation is possible. This will also be confirmed by a Tooltip that shows when hovering the actual button itself.
https://invis.io/92YNS278UFW#/430716328_Header_Bar_-_Back_Navigation