At the TrustStack, we have created a set of Web Components that are designed to be used in your applications. These components are designed to be used in your applications, and are designed to be used in your applications.

This is a library that will continuously be updated based on design inspiration and feedback from our users.

The goal is to get you setup with a set of templates quickly, and then you can customize them to your needs.

​
Usage

To add our Web Components to your templates, follow these steps:

  1. Include the Web Components script in your HTML file. You can do this by adding the following line within the <head> section of your HTML:
<script type="importmap">
  {
    "imports": {
      "@material/web/": "https://esm.run/@material/web/"
    }
  }
</script>

<script type="module">
  import "@material/web/all.js";
  import {styles as typescaleStyles} from "@material/web/typography/md-typescale-styles.js";

  document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>

<link
  rel="stylesheet"
  href="https://components.truststack.dev/v0.0.1/canvas/canvas.css"
/>

<script
  type="module"
  src="https://components.truststack.dev/v0.0.1/canvas/canvas.esm.js"
/>

<script
  nomodule
  src="https://components.truststack.dev/v0.0.1/canvas/canvas.js?"
/>
  1. Use the Web Components in your HTML by adding the desired component tags directly into your markup. For example:
<stack-layout></stack-layout>
  1. Customize the components as needed by adding attributes.

For more detailed information on each component and its usage, please refer to the component documentation.

​
Theming

The TrustStack Web Components are designed to be used with our theming system style system, which is heavily based on Google’s Material Design

Review the Theming documentation for more information on how to use the theming system.