patterns / null

Page Header

Overview

Most pages in the application have a repeatable pattern of components. This documentation provides the general best practice for what can be added to a header, where in it, and when to use it. This pattern is used in conjunction with our Page component.

Principles

  1. Consistency in structure and page relation. On any given page, how the header arranges descriptions, actions, and navigation should be similar across the application.

  2. Prioritize small vertical height. Many pages in the ServiceTitan app are dense. Headers should help users complete their tasks on a page, but should get out of the way for the page’s main content.

  3. Consistency in foundational styles. There are many ways to subtly visualize the same header. Standardizing the foundational choices, from text sizes to button variations, improves familiarity to users.

Header Anatomy

Page Headers are broken up into three general functions: The description of the page, actions on the page, and navigation within the page.

Metadata

Most pages will provide a basic amount of information in the header, typically just a page title.

Page title

Most pages should have a title. The title should represent the main content of the page itself, including user-generated titles.


Content of the page.

Description

Descriptions provide a more detailed overview of what the page is about. In general this will be a single line of text, but can be customized to fit the specific needs of a page. A title should always be used with a description.


Content of the page.

Content of the page.

Tags

Tags provide useful metadata about the page. The relative importance of this data varies from page to page: the visual variations provided by Tags can help prioritize them in the header.