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
- Use Level 2 shadow for the utility panel.
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.
- 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.