Foundations

Messages

This is an unstyled message
infoThis is a primary message
helpThis is a secondary message
helpThis is a tertiary message
check_circleThis is a success message
errorThis is a danger message
warningThis is a warning message
info Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, reprehenderit. Debitis maiores, repellat aliquam sed assumenda ad corporis deserunt, hic officia distinctio recusandae suscipit. Nihil cum aliquam explicabo nam minus!

Buttons - Normal

Default
Outline
Text

Buttons - Normal

Default
Outline
Text

Theme Colors

Primary
#005F9E
Secondary
#009AD9
Tertiary
#EAEAEF
Success
#5E9331
Danger
#C81922
Warning
#FFA500
Yellow
#FFBE00
Dark
#363545
Light
Shouldn't show
Info
shouldn't show

UI Colors

Main Background
#ffffff
Panel Background
#F3F3F7
Active
#0C77BE
Hover
#EAEAEF
Selected
#E5F0F8

Trimble Colors

Trimble Blue Dark
#002D5B
Trimble Blue
#00437B
Trimble Blue Mid
#005F9E
Trimble Blue Light
#009AD9
Trimble Yellow
#FFBE00
Trimble Green
#4D6F33
Trimble Red
#A51D25

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 (Don't use)

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)

Form Labels + Card Caption / Open SansRegular

Code (Monospace)

Typography Example

Heading 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repellendus consectetur illo ratione? Possimus facere dolorum aspernatur aliquam. Inventore totam facere nesciunt! Distinctio exercitationem magni nobis harum excepturi dolores earum.

Heading 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repellendus consectetur illo ratione? Possimus facere dolorum aspernatur aliquam. Inventore totam facere nesciunt! Distinctio exercitationem magni nobis harum excepturi dolores earum.

UI Elements

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 more

Pagination

Accordions

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion - Small

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion - Borderless

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alerts

Toasts

Badges

Badge check Badge build Badge Badge
Badge check Badge build Badge Badge
Badge check Badge build Badge Badge
Pills
Primary check Tertiary build Success Warning
Badges inside buttons
Badges as List Item
  • List with Badge 8
Badge Links
Primary Secondary Dark Success Danger Tertiary Warning

Badges - Text

Badge Badge Badge Badge Badge Badge Badge
Badge Badge Badge Badge Badge Badge Badge
Badge Badge Badge Badge Badge Badge Badge
Pills
Primary Secondary Tertiary Dark Success Danger Warning
Badges inside buttons
Badges as List Item
  • List with Badge 14
Badge Links
Primary Secondary Dark Success Danger Tertiary Warning
Normal Custom (accessible) With Icons

Buttons - Normal

Default
Hover
Active
Disabled

Buttons - Outline

Default
Hover
Active
Disabled

Buttons - Reverse

Default
Hover
Active
Disabled

Buttons - Text

Default
Hover
Active
Disabled

Buttons - With Icons

Buttons - Icon Only

Buttons - Other Libraries

Buttons - Sizes

Small
Normal
Large

Buttons - Block Level

Buttons - Active State

Chips

Solid

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Solid Small

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Outline

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Outline Small

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Reverse

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Reverse Small

Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel
Jane
cancel

Choice Chips

Solid

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Solid Small

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Outline

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Outline Small

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Reverse

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Reverse Small

local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel
local_taxi
Taxi
cancel

Cards

Card Header

Card image cap

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
Card link Another link
Card Footer
Simple Dropdowns
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Split Button
Action Another action Something else here
Dropdown Direction
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Menu Styles
Dropdown header
Regular Item Active Item Disabled Item
Separated link

Forms

visibility
search

Input - States

On Focus
search
Is Valid
visibility
Is Invalid
search
Disabled
visibility

Inputs - Large

visibility
search

Inputs - Outlined

visibility
search

Input Groups

@
@example.com
Large

Input Groups - Outlined

@
@example.com
Large

Text Areas

Switches

Radio Buttons

Indeterminate State

Checkboxes

Indeterminate State

Sliders

Lists

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox
  • Left Radio Button
  • Left Radio Button
  • List Item (disabled)
  • gear Left Icon
  • Right Icon gear
  • gear Both Icons check
  • List with Badge 14
  • Both Buttons

Lists - Outlined

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox
  • Left Radio Button
  • Left Radio Button
  • List Item (disabled)
  • gear Left Icon
  • Right Icon gear
  • gear Both Icons check
  • List with Badge 14
  • Both Buttons

Lists - Chromeless

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox
  • Left Radio Button
  • Left Radio Button
  • List Item (disabled)
  • gear Left Icon
  • Right Icon gear
  • gear Both Icons check
  • List with Badge 14
  • Both Buttons

Lists - Small

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox
  • Left Radio Button
  • Left Radio Button
  • List Item (disabled)
  • gear Left Icon
  • Right Icon gear
  • gear Both Icons check
  • List with Badge 14
  • Both Buttons

Modals

Progress and Spinners

Shadow Depth

shadow-sm
shadow
shadow-lg
No Shadow
Shadow 1
Shadow 2
Shadow 3
Shadow 4
Shadow 5

Tabs

Basic Icon Only Small Icon Small With Content
First Tab Content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab totam harum, sed modi iste officiis neque optio eos culpa cumque in voluptatem quaerat at similique est reprehenderit exercitationem, provident unde.

Second Tab Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus cumque numquam, aut ad quibusdam quidem dolorem repudiandae nisi consectetur laboriosam porro dolorum sint debitis! Porro minus quidem non quae tempora.

Third Tab Content

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas quaerat numquam, dolorem aperiam quasi, tenetur qui quae doloribus ullam maiores amet minus aliquam mollitia officia quia eius? Excepturi, cum minus.

Disabled Tab Content

This content is disabled and unviewable.

Tooltips

blocks_four
reports
circle_add
blocks_four_outline


Tables

First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here
First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here

Tables - Striped Rows

First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here
First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here

Tables - Head Options

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tables - Bordered

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tables - Borderless

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tables - Hoverable Rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tables - Small

First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here
First Last Handle
Mark Otto @mdo
Action Another action Something else here
Jacob Thornton @fat
Action Another action Something else here
John Snow @jsnow
Action Another action Something else here
Larry the Bird @twitter
Action Another action Something else here

Custom Scrollbars

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab totam harum, sed modi iste officiis neque optio eos culpa cumque in voluptatem quaerat at similique est reprehenderit exercitationem, provident unde.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

© Copyright 2020, Trimble Inc.