Text List

A styled list component that renders as a bulleted list, a numbered list, or an inline flex row. Accepts diwa-text-list-item children.

Unordered list

Design tokens for colour, typography, and spacing

Stencil web components with shadow DOM

CSS-in-JS styling with full token cascade

Next.js storefront with live configurator

<diwa-text-list type="unordered">
  <diwa-text-list-item>Design tokens for colour, typography, and spacing</diwa-text-list-item>
  <diwa-text-list-item>Stencil web components with shadow DOM</diwa-text-list-item>
  <diwa-text-list-item>CSS-in-JS styling with full token cascade</diwa-text-list-item>
  <diwa-text-list-item>Next.js storefront with live configurator</diwa-text-list-item>
</diwa-text-list>

Ordered list

Install the package via npm

Import the component loader

Place the custom element in your HTML or JSX

Override tokens with CSS custom properties as needed

<diwa-text-list type="ordered">
  <diwa-text-list-item>Install the package via npm</diwa-text-list-item>
  <diwa-text-list-item>Import the component loader</diwa-text-list-item>
  <diwa-text-list-item>Place the custom element in your HTML or JSX</diwa-text-list-item>
  <diwa-text-list-item>Override tokens with CSS custom properties as needed</diwa-text-list-item>
</diwa-text-list>

Inline list

Inline lists render as a horizontal flex row - useful for tags, breadcrumbs, or comma-separated values.

React

Vue

Angular

Vanilla JS

<diwa-text-list type="inline">
  <diwa-text-list-item>React</diwa-text-list-item>
  <diwa-text-list-item>Vue</diwa-text-list-item>
  <diwa-text-list-item>Angular</diwa-text-list-item>
  <diwa-text-list-item>Vanilla JS</diwa-text-list-item>
</diwa-text-list>

Nested list

Place a diwa-text-list inside a diwa-text-list-item to create a nested hierarchy. The inner list can use any type independently of the outer list.

Design

Tokens

Icons

Motion

Development

Components

Utilities

Generators

Documentation

Usage guidelines

API reference

Accessibility

<diwa-text-list type="unordered">
  <diwa-text-list-item>
    Design
    <diwa-text-list type="unordered">
      <diwa-text-list-item>Tokens</diwa-text-list-item>
      <diwa-text-list-item>Icons</diwa-text-list-item>
      <diwa-text-list-item>Motion</diwa-text-list-item>
    </diwa-text-list>
  </diwa-text-list-item>
  <diwa-text-list-item>
    Development
    <diwa-text-list type="unordered">
      <diwa-text-list-item>Components</diwa-text-list-item>
      <diwa-text-list-item>Utilities</diwa-text-list-item>
      <diwa-text-list-item>Generators</diwa-text-list-item>
    </diwa-text-list>
  </diwa-text-list-item>
  <diwa-text-list-item>
    Documentation
    <diwa-text-list type="unordered">
      <diwa-text-list-item>Usage guidelines</diwa-text-list-item>
      <diwa-text-list-item>API reference</diwa-text-list-item>
      <diwa-text-list-item>Accessibility</diwa-text-list-item>
    </diwa-text-list>
  </diwa-text-list-item>
</diwa-text-list>