Skip to main content

Utility Panel

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

Specifications

Placement

  • 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.

Shadows

Sizing

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

Colors

Element Property Color
Utility Panel Background White Trimble Gray
#ffffff
#252a2e
Header Title White Gray 0
#ffffff
#e0e1e9
Text Trimble Gray Gray 0
#252a2e
#e0e1e9
Chevron Gray 6 Gray 0
#6a6e79
#e0e1e9
Divider Line Gray 0 Gray 0
#e0e1e9
#e0e1e9

Typography

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

Structure

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

Behaviors

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

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

Footer

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

Editorial

  • 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.
Last updated November 14, 2023.