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

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)

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

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 more

Pagination

Accordions

Collapsible Group Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

Collapsible Group Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

Collapsible Group Item #3

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

Accordion - Small

Collapsible Group Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

Collapsible Group Item #2

Collapsible Group Item #3

Collapsible Group Item #4

This is the fourth item's accordion body. It is hidden and disabled by default.

Accordion - Borderless

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Collapsible Group Item #4

This is the fourth item's accordion body. It is hidden and disabled by default.

Alerts

A Primary alert link.

A secondary alert with a button link.

A dark alert with an example link.

Success! A success alert with text formatting link.

Warning! A warning alert with a dismiss icon

A warning alert with a dismiss icon link.

A warning alert with an icon and dark text link.

Messages

infoThis is a primary message

helpThis is a secondary 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!

Toasts

Hello, world! This is a toast message.

Aww yeah, you read a toast.

Aww yeah, you read a dark toast.

Aww yeah, you read a primary toast.

Aww yeah, you read a secondary toast.

Aww yeah, you read a tertiary toast.

Aww yeah, you read a danger toast.

Aww yeah, you read a warning toast.

Aww yeah, you read a success toast.

Badges

Badge check Badge Badge Badge

Pills

Primary check Tertiary 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

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

Breadcrumbs

Normal Custom (accessible) With Icons

Buttons - Normal

Default

Hover

Active

Disabled

Buttons - Outline

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 - Active State

Chips

Solid

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Solid Small

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Outline

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Outline Small

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

Jane

cancel

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

Card link Another link

Card Footer

Dropdowns

Simple Dropdowns

Split Button

Dropdown Direction

Menu Styles

Forms

Regular Input Form text example (with form-text class)

Input with icon on right

visibility

Input with icon on left

search

Input with a button

Custom Select

Custom Select Disabled

Input - States

On Focus Label

search

Is Valid Label

visibility

Is Invalid Label

search

Disabled Label

visibility

Readonly Label

visibility

Readonly Disabled Label

visibility

Input - Validation

First name

Looks good!

Last name

Looks good!

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Inputs - Large

Input Form text example (with form-text-lg class)

Input with icon on right

visibility

Input with icon on left

search

Input with a button

Custom Select Outlined

Input Groups

@example.com

Large

Text Areas

Normal Text Area

Large Text Area

Outlined Text Area

Large Outlined Text Area

Switches

Switch

Disabled

Radio Buttons

Radio 1

Radio 2

Disabled

Checkboxes

Checkbox

Disabled

Indeterminate State

Checkbox

Disabled

Sliders

Slider

Disabled Slider

Lists

List Item (active)
Left Switch
Right Switch
Left Checkbox
Left Radio Button
Left Radio Button
List Item (disabled)
Left Icon
Right Icon
Both Icons
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)
Left Icon
Right Icon
Both Icons
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)
Left Icon
Right Icon
Both Icons
List with Badge 14
Both Buttons

Lists - Large

List Item (active)
Left Switch
Right Switch
Left Checkbox
Left Radio Button
Left Radio Button
List Item (disabled)
Left Icon
Right Icon
Both Icons
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)
Left Icon
Right Icon
Both Icons
List with Badge 14
Both Buttons

Modals

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quisquam distinctio laudantium, rerum nobis quo sunt debitis facilis. Deleniti, necessitatibus culpa? Ducimus quis dicta, totam quia velit expedita possimus impedit.

Dolorem, explicabo ullam reiciendis non vitae eius vero quaerat quibusdam soluta eum quasi sapiente omnis nesciunt consequuntur mollitia magnam quia maxime ad, eaque, animi pariatur minus eos. Voluptatem, doloribus ex.

Cumque incidunt pariatur reiciendis. Nemo fugit molestiae numquam error, tempore cupiditate eos, explicabo cumque dolorum ad ullam veritatis facilis minima ipsam nulla quaerat dicta similique distinctio. Eligendi nulla dignissimos ad?

Magnam quia id iusto est exercitationem rem ab officiis placeat reiciendis a eum blanditiis porro numquam totam alias, expedita dolor maxime tenetur ipsam! Ad, sequi repellat officia voluptas architecto commodi!

Libero voluptatum nihil ipsa et aspernatur quam illum incidunt enim eum? Suscipit, exercitationem aut animi debitis dolorum vitae. Tenetur quibusdam molestias blanditiis ab mollitia cumque fugit accusantium atque, delectus assumenda.

Dolore eos unde atque asperiores voluptatum. Obcaecati odio consequuntur modi, sunt aut facere! Quasi blanditiis harum tenetur alias eveniet aliquam. Sunt tenetur, nisi sed assumenda voluptates in excepturi vitae sit?

Ipsam eos, numquam repellat, ab adipisci magnam iure cupiditate maiores illum architecto reprehenderit, repellendus non laborum vitae sapiente aperiam provident nesciunt! Dolore fugit incidunt, placeat blanditiis cumque dolores maxime velit!

Labore iusto corrupti asperiores quaerat eligendi ullam distinctio, inventore quibusdam, numquam minima impedit quas magnam exercitationem dolore eveniet qui illum soluta delectus in et? Nobis repellat vitae excepturi rerum totam!

Perferendis ut ea cupiditate tempora quam, totam accusamus commodi, omnis aspernatur adipisci nulla molestiae libero. Aliquam vitae dicta natus, voluptas amet sequi totam eius corporis aspernatur quas ratione minus odio.

Aspernatur incidunt doloribus quo numquam delectus quaerat, rem itaque dolorum? Eligendi, similique? Totam dolores temporibus, tempore illum amet in delectus unde quaerat, quibusdam quasi maiores eos at aperiam ea dolorum!

Corrupti quo, aliquam iste veniam ad aperiam ut voluptate velit vel eum. Facere nostrum recusandae omnis vel neque magnam. Quasi minus repudiandae, placeat maxime labore ullam modi. Nemo, a provident?

Ea quae suscipit alias dignissimos rem quisquam praesentium laboriosam impedit deserunt illo fugit ipsum id provident eos enim doloremque, tempore est natus expedita voluptates labore! Optio atque sint assumenda harum.

Voluptatibus voluptas sequi rerum ut ea numquam iste sapiente aliquam qui reiciendis eum vitae nostrum officiis quibusdam repellendus provident facere unde saepe deserunt harum, expedita minus mollitia ipsam! Qui, ipsum!

Culpa laudantium expedita aliquam corporis voluptatibus quas quasi atque harum architecto exercitationem! Odio, voluptatum, eos optio repellat voluptatem magnam adipisci corrupti vel ut fuga error voluptas excepturi veritatis doloribus dolorem!

Amet aliquam, facere veritatis possimus dolore quo, suscipit quam repellendus assumenda eligendi labore quos blanditiis natus molestias corporis velit at ratione nobis ducimus maxime officiis eos in? Dolores, placeat soluta!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde similique tempora deserunt explicabo harum, numquam impedit blanditiis quaerat quos pariatur veritatis nam placeat libero. Quae asperiores unde velit odio ad!

Eius, tempora ut optio molestiae modi amet placeat et. Ullam amet cupiditate aspernatur, corporis cumque alias mollitia quis omnis, facilis at reprehenderit? Eius cum ratione quisquam optio earum dolor enim.

Reiciendis eaque, non eum quae delectus minima veniam optio obcaecati quibusdam voluptate nulla debitis tenetur omnis minus pariatur ipsam fugit soluta repellat, quaerat vitae sint. Quas corrupti est nobis voluptatum!

Cupiditate exercitationem ut consequatur, illo nemo iusto ipsum earum nulla veritatis doloremque laboriosam cum, odit adipisci velit. Sed, vitae impedit corrupti atque fugiat facilis ab expedita, quaerat suscipit voluptates perspiciatis.

Quaerat doloremque expedita veritatis omnis deserunt atque maiores tenetur eaque nemo sed. Accusamus at explicabo quasi debitis ullam quos sed quis sapiente, quae reiciendis quaerat. Fugit voluptates sunt neque ratione!

Quo, sit ipsum. Vero, voluptatibus laudantium vitae sunt sapiente temporibus, maxime voluptatem soluta tempore fugit, facilis eveniet? Neque at similique porro in, ducimus repudiandae expedita deleniti? Consequatur nulla assumenda provident?

Fugiat nobis est eum quas voluptatum asperiores voluptas hic sapiente dolore deserunt facere saepe soluta sed ad sit unde quibusdam ipsa rerum voluptate nemo commodi quaerat vel, cumque ipsam! Ad.

Enim, corporis deserunt, ut magni provident ex nemo deleniti suscipit nostrum ad blanditiis quasi nam aperiam fugit cum ipsa numquam consequuntur dolorem fugiat nulla! Doloribus, perspiciatis tempore. Rem, dolorum quaerat!

Laudantium exercitationem, porro inventore a ipsam earum obcaecati nesciunt repudiandae, officiis commodi id. Praesentium aspernatur totam unde incidunt similique! Sapiente dolore excepturi aspernatur quia corporis, delectus eos nulla ullam dolorem.

Voluptatem, beatae ab aliquam commodi corporis quod incidunt sunt totam provident eaque quos officia? Sint recusandae delectus non, dolorem quis nulla consectetur est ullam labore impedit. Reprehenderit, neque! Minima, quo?

Voluptates in rem, dolorum fugiat ad porro libero dolor labore consectetur deleniti distinctio vel magnam assumenda impedit eum amet reiciendis exercitationem! Voluptas, id. Voluptates repellat tempora officia cupiditate ex sint.

Odit quae commodi eos ratione consequatur voluptatum expedita porro. Dolore voluptatem fugit maiores, error soluta libero nam. Eligendi eaque itaque possimus, vero provident aperiam quod quae aut voluptas, dolor incidunt.

Reiciendis commodi tempora molestiae voluptatem enim praesentium minus. Repellat optio at animi suscipit, soluta magni harum ad, eaque excepturi voluptas accusantium reprehenderit dolorem nesciunt rerum blanditiis illo culpa omnis consequatur!

Totam vel hic libero, laudantium nisi temporibus itaque facilis, praesentium, ipsum nulla nemo reiciendis voluptate ratione eveniet neque architecto numquam repellendus iure? Velit quaerat natus dolorum vel tempore at modi?

Qui expedita nihil alias id voluptatem natus esse cum aliquam modi temporibus amet rerum sunt at ducimus quia adipisci necessitatibus, omnis deserunt debitis dignissimos. A dolore deleniti quidem vero. Quis.

Progress and Spinners

Shadows

shadow-sm

shadow

shadow-lg

Navs

Tabs

Basic

Icon Only

Small

Icon Small

With Content

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

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

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.

File Dropzone

Drag and Drop CSV here

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

Typography Example

Heading 3

Heading 4

Components

Jumbotron

Hello, world!

Pagination

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

Badge Links

Badges - Text

Pills

Badges inside buttons

Badges as List Item

Badge Links

Breadcrumbs