Truckstop Web Components

Using these components are as simple as:

1. Add the component library as a script tag to your HTML file: <script src="/build/ts-components.js"></script>
2. If you want to use Truckstop Icons, include that too as a script tag: <script src="https://icons.truckstop.com/tsicons.js"></script>
3. Browse using the left side menu to learn details on the Web Component of your choice.
4. Use the webcomponent in your code. E.g.: to add a switch to your webpage, add <mdc-switch checked="true"></mdc-switch>
5. If you want to use different fonts, include that font as a link tag: E.g <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

If you would like to contribute to the collection of components, head to the repo:

TS-Icons is a collection of commonly used Icons across the Truckstop.com web applications, packaged be used on any website as a webcomponent, font icon or SVG.

All the icons you see on this website are rendered via ts-icons. Following are some additional examples and their sample usages:

• <ts-icon name="eld-device"></ts-icon>
• <ts-icon name="equipment-truck"></ts-icon>
• <ts-icon name="fuel-pump"></ts-icon>
• <ts-icon name="dfm"></ts-icon>
• <ts-icon name="logo"></ts-icon>

You can view the full list at https://icons.truckstop.com