This is a sample component that makes use of Lit, QuietUI and HTMX to render HTML in a browser (web site/app)

CardComponent.web.ts

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
// Import Quiet UI CSS token architecture
import quietStyles from '@quietui/quietui/restyle.css?inline';

@customElement('card-component')
export class CardComponent extends LitElement {
  static styles = [
    // Apply Quiet UI CSS
    css: `${unsafeCSS(quietStyles)}`,
    // Component-specific styles
    css:`
      :host { display: block; padding: 1rem; }
    `
  ];

  /*
    :host {
      --my-color: var(--qui-primary-color);
      --my-spacing: var(--qui-spacing-md);
    }
  */
  
  render () {
    return html`
      <div class="card-container">
        <slot></slot>
      </div>
    `;
  }
}