``` -------------------------------- ### Top Navbar Anatomy Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/mobile/top-navbars/styles.md Illustrates the anatomical structure of a top navbar, showing its components and their placement. This is a visual guide for understanding the layout. ```HTML Navbar Anatomy

``` -------------------------------- ### Example Prompt Component (Go Template) Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/prompts/styles.md This Go template snippet demonstrates how to render a prompt component, likely within a web framework. It uses a shortcode syntax '{{< ... >}}' to include an image with specified source, dark mode source, and alt text. ```go {{< img src="/img/in-field/prompt-spec.svg" dark="/img/in-field/prompt-spec-dark.svg" width="587" alt="Example of a small message" loading="auto" >}} ``` ```go {{< img src="/img/in-field/prompts-oem.svg" dark="/img/in-field/prompts-oem-dark.svg" width="1087" height="370" class="w-100" alt="Prompts OEM" >}} ``` -------------------------------- ### Top Navbar Color Options Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/mobile/top-navbars/styles.md Presents the available color options for top navbars, which include White and a specific shade of Trimble Blue Dark. This guides the color selection for the navbar. ```HTML Navbar Colors

``` -------------------------------- ### Inline Labels with Vertical Layout Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/web/wizard/styles.md Illustrates how to implement inline labels with a vertical layout, often used for step-by-step guides or timelines. This example uses Bootstrap's flexbox utilities and absolute positioning for elements. ```HTML

Label

``` -------------------------------- ### Web Components Switch Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/web/switches/styles.md Illustrates the implementation of switches using web components, a framework-agnostic way to build reusable UI elements. This link points to the Storybook documentation for the Modus web components switch. ```HTML Modus Web Components Switch Documentation ``` -------------------------------- ### Latin Abbreviations Usage Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/foundations/writing-style.md This guideline advises on the use of Latin abbreviations in text, recommending English equivalents whenever possible due to space limitations. It provides examples like 'i.e.', 'e.g.', and 'etc.' and specifies punctuation rules when they must be used, particularly in tables. ```English i.e. (id est) = that is e.g. (exempli gratia) = for example etc. (et cetera) = and so forth If you have to use Latin abbreviations due to limited space (as in a table), use the appropriate punctuation, that is, a comma before and after. ``` -------------------------------- ### Basic Grid Layout Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/foundations/grid-and-spacing.md This snippet demonstrates a basic responsive grid layout using Bootstrap-like classes. It shows how columns adjust their width based on screen size, with specific column classes like 'col', 'col-2', and 'col-4'. ```HTML

``` -------------------------------- ### Checkbox OEM Branding Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/checkboxes/styles.md Shows an example of how checkboxes can be branded with custom colors for enhanced visibility. ```html Checkboxes OEM

``` -------------------------------- ### Modus Help Asset Categorization Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/foundations/user-assistance.md This section explains how to categorize help assets by analyzing their format (visual to text-based), length (minutes to days), and scope (task-based to high-level). It maps these properties to four core categories: Guide, Demo, Tutorial, and Training. -------------------------------- ### Tabs Component Usage Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/tabs/_index.md This snippet demonstrates how to use the Tabs component in a web page. It includes an image example and usage guidelines. ```html Tabs example

``` -------------------------------- ### Go Redirect Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/_index.md A basic Go program demonstrating a redirect, likely used for routing within a web application. This snippet is illustrative and may require a web framework context to be fully functional. ```go package main import ( "log" "net/http" ) func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { http.Redirect(w, r, "/components/web/", http.StatusSeeOther) }) log.Fatal(http.ListenAndServe(":8080", nil)) } ``` -------------------------------- ### Set up Modus XR with MRTK and Unity Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/xr/introduction/_index.md This snippet outlines the process of setting up Modus XR using MRTK 2.8.3 as a base, deployable with Unity versions 2020.3 or 2021.3. It directs users to MRTK's GitHub page for downloading the necessary Unity packages. ```markdown XR patterns and components are currently available using [MRTK 2.8.3](https://learn.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk2/?view=mrtkunity-2022-05) as a base and can be deployed and implemented using [Unity v. 2020.3 or 2021.3](https://unity.com/download). Please refer to [MRTK's GitHub page](https://github.com/Microsoft/MixedRealityToolkit-Unity/releases) to download the required Unity packages to deploy Modus XR. ``` -------------------------------- ### OEM Branding Example for Sliders Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/sliders/styles.md An example showcasing how sliders can be branded with a primary color for OEM customization. This image displays sliders with associated labels. ```HTML Sliders example

``` -------------------------------- ### Build Production Version with npm Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/README.md Builds an optimized production-ready version of the Modus project. This is typically used before deployment. ```bash npm run build ``` -------------------------------- ### Scrollbar Example Image Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/scrollbars/styles.md Presents a visual example of a scrollbar within a list interface, demonstrating its appearance and usage. This serves as a practical reference for implementing scrollbars correctly. ```HTML Example of scrollbar in Lists

``` -------------------------------- ### Progress Bar Example (Go) Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/mobile/progress-bars/styles.md This Go code snippet demonstrates how a progress bar might be implemented or managed in a Go application, possibly for command-line interfaces or backend processes. ```go package main import ( "fmt" "time" ) func main() { for i := 0; i <= 100; i++ { fmt.Printf("\rProgress: %d%%", i) time.Sleep(50 * time.Millisecond) } fmt.Println("\nDone!") } ``` -------------------------------- ### What's Changed Table Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/mobile/tables/_index.md A Hugo shortcode example for displaying a table of changes, including date, version, notes, and contributors. The content is structured within a Hugo shortcode. ```go {{< whats-changed-table >}} | Date | Version | Notes | Contributors | | ---------- | ------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | 01/16/2023 | 1.0.0 | New component added. | D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati | {{}} ``` -------------------------------- ### HTML Structure for Shadow Examples Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/foundations/shadows-and-depth.md Provides the HTML structure for displaying different shadow levels with associated descriptions. This includes cards with headers and bodies showcasing the visual effect and use cases of each shadow level. ```HTML

Level 1

box-shadow:
      0 0 2px rgba(37,42,46,.3);

Used for: dropdowns, tooltips, default cards

Level 2

box-shadow:
      0 0 4px rgba(37,42,46,.3);

Used for: sticky elements, cards active

Level 3

box-shadow:
      0 0 8px rgba(37,42,46,.3);

Used for: dialogs, modals, cards hover

``` -------------------------------- ### Display Accordion Examples Image Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/in-field/accordions/_index.md Shows an example image of Accordions, including a dark mode variant. This helps users understand the visual implementation and variations of the Accordion component. ```html

``` -------------------------------- ### Tabs Component Examples (HTML/CSS) Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/web/tabs/styles.md Demonstrates various states and sizes of the Tabs component using HTML and CSS. Includes default, active, hover, disabled, and small tab variations. ```HTML

Default

``` ```HTML

Active/Selected

``` ```HTML

Hover

``` ```HTML

Disabled

``` ```HTML

Small

``` ```CSS [data-bs-theme="light"] .nav-tabs .nav-link.hover { background-color: #E0E1E9 !important; } ``` -------------------------------- ### Image Component Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/web/tables/styles.md An example of using the Modus image component, potentially for displaying table-related visuals. It includes attributes for source, dark mode source, class, and alt text. ```HTML Changing a Sort Type

``` ```HTML Filtering Options

``` -------------------------------- ### Toolbar with Separate Buttons Example Source: https://github.com/trimble-oss/website-modus.trimble.com/blob/main/content/components/web/toolbar/_index.md Demonstrates a toolbar with individual icon buttons that are not connected. This example uses Modus Icons and Bootstrap for styling, showcasing buttons with tooltips and distinct visual separation. ```HTML

```

Card Title

Card Subtitle

Columns

Gutters

Level 1

Level 2

Level 3

Modal header

Card Title

Card Subtitle

Columns

Gutters

Level 1

Level 2

Level 3