Foundations
Theme Colors
Primary
Secondary
Tertiary
Success
Danger
Warning
Dark
Light
Shouldn't show
Info
shouldn't show
UI Colors
Main Background
Panel Background
Active
Hover
Selected
Trimble Colors
Trimble Blue
Trimble Blue Dark
Trimble Yellow
Trimble Gray
Trimble Green
Trimble Red
Headings
H1 Modus heading - 24px
H2 Modus heading - 20px
H3 Modus heading - 18px
H4 Modus heading - 16px
H5 Modus heading - 14px
H6 Modus heading - 12px
Display Headings
Display 1
Display 2
Display 3
Display 4
Typefaces
H1 Open Sans Regular
H2 Open Sans Regular
H3 Open Sans Semi Bold
H4 Open Sans Semi Bold
H5 Open Sans Bold
H6 Open Sans Bold
Lead Text / Open Sans Regular
Body / Open Sans Regular
Card Text / Open Sans Regular
Card Text 2 / Open Sans Semibold
Card Subtitle 1 / Open Sans Regular
Card Subtitle 2 / Open Sans Bold (All Caps)
Code (Monospace)
small
small
pre
Typography Example
Heading 3
I got the eye of the tiger, a fighter, dancing through the fire. Are you ready for, ready for. Heavy is the head that wears the crown. Need some goose, to get loose, come on take a shot. Watch you circle the drain. If you wanna dance. Should've been my team mate, could've changed your fate.
Heading 4
I got the eye of the tiger, a fighter, dancing through the fire. Are you ready for, ready for. Heavy is the head that wears the crown. Need some goose, to get loose, come on take a shot. Watch you circle the drain. If you wanna dance. Should've been my team mate, could've changed your fate.
Components
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn morePagination
Accordions
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
Accordion - Small
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
Collapsible Group Item #4
Accordion - Borderless
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
Collapsible Group Item #4
Alerts
Messages
Toasts
Badges
Pills
Badges inside buttons
Badges as List Item
- List with Badge 8
Badge Links
Badges - Text
Pills
Badges inside buttons
Badges as List Item
- List with Badge 14
Badge Links
Breadcrumbs
Normal Custom (accessible) With IconsButtons - Normal
DefaultButtons - Outline
DefaultButtons - Text
DefaultButtons - With Icons
Buttons - Icon Only
Buttons - Other Libraries
Buttons - Sizes
SmallButtons - Active State
Chips
Solid
Solid Small
Outline
Outline Small
Cards
Card Header
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
- List Item
- List Item
- List Item
Forms
Input - States
Input - Validation
Inputs - Large
Inputs - Outlined
Input Groups
Input Groups - Outlined
Text Areas
Switches
Radio Buttons
Checkboxes
Sliders
Lists
- List Item (active)
-
-
Right Switch
-
-
-
- List Item (disabled)
- gear Left Icon
- Right Icon gear
- gear Both Icons check
- List with Badge 14
- Both Buttons
Lists - Outlined
- List Item (active)
-
-
Right Switch
-
-
-
- List Item (disabled)
- gear Left Icon
- Right Icon gear
- gear Both Icons check
- List with Badge 14
- Both Buttons
Lists - Chromeless
- List Item (active)
-
-
Right Switch
-
-
-
- List Item (disabled)
- gear Left Icon
- Right Icon gear
- gear Both Icons check
- List with Badge 14
- Both Buttons
Lists - Large
- List Item (active)
-
-
Right Switch
-
-
-
- List Item (disabled)
- gear Left Icon
- Right Icon gear
- gear Both Icons check
- List with Badge 14
- Both Buttons
Lists - Small
- List Item (active)
-
-
Right Switch
-
-
-
- List Item (disabled)
- gear Left Icon
- Right Icon gear
- gear Both Icons check
- List with Badge 14
- Both Buttons
Modals
Progress and Spinners
Shadows
Navs
Tabs
First Tab Content
Placeholder content for the tab panel. This one relates to the First tab. Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion.
Second Tab Content
Placeholder content for the tab panel. This one relates to the Second tab. Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion.
Third Tab Content
Placeholder content for the tab panel. This one relates to the Third tab. Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion.
Disabled Tab Content
This content is disabled and unviewable.
Tooltips
Tables
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
Tables - Striped Rows
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
Tables - Head Options
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Tables - Bordered
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Tables - Borderless
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Tables - Hoverable Rows
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Tables - Small
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
First | Last | Handle | ||
---|---|---|---|---|
Mark | Otto | @mdo |
|
|
|
Jacob | Thornton | @fat |
|
|
John | Snow | @jsnow |
|
|
Larry | the Bird |
|
Custom Scrollbars
I'll be your gift, give you something good to celebrate. The girl's a freak, she drive a jeep in Laguna Beach. Boy, you should know what you're falling for. (This is how we do) Wanna be your lover, not your mother. Warm, wet and wild there must be something in the water. I’m gon’ put her in a coma. Bring the beat back. The girl's a freak, she drive a jeep in Laguna Beach. She ride me like a roller coaster.
Got a motel and built a fort out of sheets.'Cause I am a champion and you’re gonna hear me roar.
What? Wait. No, no, no, no. Think I need a ginger ale, that was such an epic fail. We go deeper and harder than ever before. Like thunder gonna shake the ground. Got a motel and built a fort out of sheets. Drifting through the wind, wanting to start again? So I don't have to say you were the one that got away.