Components

Web Components

An optional custom-element layer over the CSS. Each element renders light DOM with .ds-* classes, so it is styled entirely by the global stylesheet, themeable for free via tokens, and needs no build step.

Setup

Load the stylesheet and the module — the elements register themselves. The same .ds-* CSS styles them, so they theme with your tokens automatically.

Include

<link rel="stylesheet" href="css/diametral.css">
<script type="module" src="components/index.js"></script>

Live elements

Real custom elements rendered live below, each with its source. Attributes follow the elements table in the components README.

<ds-button>

Save

<ds-button variant="primary">Save</ds-button>

<ds-badge>

Admin

<ds-badge variant="solid">Admin</ds-badge>

<ds-callout>

Informational.

<ds-callout type="info" heading="Heads up">Informational.</ds-callout>

<ds-switch>

Detail mode

<ds-switch checked>Detail mode</ds-switch>

<ds-status>

<ds-status status="warning" kicker="Approval" heading="Manager review" subtitle="Needs sign-off"></ds-status>

<ds-segmented>

<ds-segmented>
  <button class="ds-segmented__item is-active">LBC_FR</button>
  <button class="ds-segmented__item">LBC_BE</button>
  <button class="ds-segmented__item">LBC_US</button>
</ds-segmented>