Skip to main content

Utility Panel

Utility panel is a container for additional content and/or functionality related to the primary screen.



  • The utility panel is the top-most element.
  • The utility panel is usually on the opposite side of the screen than the Side Navigation but can also be attached to the bottom.
  • The footer is displayed below the side navigation menu.



  • The user may resize the width of the utility panel (optional).
    • This feature is not supported on mobile.
    • The minimal width is 320px.


Element Property Color
Utility Panel Background White Trimble Gray
Header Title White Gray 0
Text Trimble Gray Gray 0
Chevron Gray 6 Gray 0
Divider Line Gray 0 Gray 0


Class Font Size Font Weight Text Transform
Header Title H4 / 16px Semibold / 600 Title Case
Accordion Header H5 / 14px Semibold / 600 Title Case
Body Body 1 / 16px Regular / 400 None
Tabs H5 / 14px Bold / 800 Upper Case


Class Height
Header Title 48px
Tabs 48px
Accordion Header (Condensed) 32px
Accordion Header (Condensed) 48px


Accordions Sections

  • The accordion sections are optional to use but usually help organizing the content.

Utility Panel with accordions example

  • If the content exceeds the side panel height, a scrollbar is used on the right side of the content. The header and footer must be on top of the content.
  • The utility panel can expand by clicking and dragging on the left side. Minimum width is 320px.


  • Tabs can be used to organize information in more than one panel for additional information.


  • The footer may contain up to two buttons. A primary button can be used, such as Save, Commit, Create, or Edit.


  • Use title case for titles.
  • Titles should describe the functionality of the panel.
  • Content can scroll in the panel, if necessary. Avoid long copy in panels.
  • Copy wraps in a panel.