> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Headers

> Example scenarios, guidance, and where each header lives.

Header illustrations set the tone for a page or module the moment it loads,
before any data or empty state appears. Most headers are not trade-specific.
Only Projects headers vary by trade; every other header context uses one
illustration per segment.

Trade bucket

> [!NOTE]
>
> Header illustrations render at a fixed 240×120px across every context — Module
> and Projects, both segments, light and dark. Design with that footprint in
> mind; a scene that reads clearly at empty-state size can lose detail at header
> size.

## Module Headers

Location and Customer headers brand the top of their pages. Each has a
Residential and Commercial version, shared across every trade. Service
Agreements is Commercial-only terminology. Residential uses "Memberships,"
which carry no header illustration.

| Header | Residential | Commercial |
| - | - | - |
| Location | Map with an address pin | Blueprint with a multi-story building |
| Customer | House with a signed agreement | Business card, clipboard, and tablet |
| Service Agreements | Not applicable. Residential uses "Memberships," which has no header illustration | Multiple agreements plus a stamp |

## Projects Headers

Projects headers follow the same Trade Bucket taxonomy as empty states:
Mechanical, Exteriors, Property Care, Emergency & Compliance, and Interiors,
each with a Residential and Commercial version. Every object is chosen to
reflect the customer's trade and segment accurately.

| Trade Bucket | Residential | Commercial |
| - | - | - |
| Mechanical | Thermostat, wrench, hand tools | Larger HVAC units, wrench, filter/vent |
| Exteriors | Paint can, hard hat, ladder | Gutter section, panels, glass door |
| Property Care | Hard hat, trowel, sign | Sprayer, shears, turf sample |
| Emergency & Compliance | Hard hat, safety vest, exit sign | Safety vest, AED, fire extinguisher, security panel |
| Interiors | Caulk gun, molding | Sink, material swatches |

## General Recommendations for All Headers

* **Consistency:** A header should never contradict the empty state or
  content that follows it. Keep segment and trade bucket aligned across
  the page.
* **One per page:** Only one header illustration should appear per page
  load, above any empty state or data table.

## Do's and Don'ts

Do's and don'ts for using header illustrations.

| Standard | Requirement |
| - | - |
| DoShip one evergreen pair per Module header | Location, Customer, and Service Agreements each get one Residential and one Commercial version, shared across every trade. |
| DoMatch Trade Bucket for Projects headers | A Commercial Exteriors account gets the Exteriors Commercial artwork, never a generic or mismatched bucket. |
| Don'tDon't build a Residential Service Agreements illustration | Residential accounts use "Memberships" instead, and Memberships pages carry no header illustration at all. |
| Don'tDon't assume header sizing matches empty states | Headers render at a fixed 240×120px. Empty states use separate Default/Large/1x/.75x size variants. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.