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.


Utility PanelBackground White Trimble Gray
Header Title White Gray 0
Text Trimble Gray Gray 0
Chevron Gray 6 Gray 0
Divider Line Gray 0 Gray 0


ClassFont SizeFont WeightText Transform
Header TitleH4 / 16pxSemibold / 600Title Case
Accordion HeaderH5 / 14pxSemibold / 600Title Case
BodyBody 1 / 16pxRegular / 400None
TabsH5 / 14pxBold / 800Upper Case


Header Title48px
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.