Skip to main content

Utility Panel

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

On this page

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

ElementPropertyColor
Utility PanelBackground 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

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

Structure

ClassHeight
Header Title48px
Tabs48px
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.
View on GitHub