Getting Started

Everything you need to use dotHello v2.5.0 — Core + 6 Addons.

Part 1 — Core

What is dotHello? v2.5.0

dotHello is a lightweight CSS and JS framework for dark-mode-first microsites — landing pages, digital business cards, product pages, and small web apps. It gives you well-designed components out of the box, driven entirely by CSS custom properties so you can brand it in minutes.

  • No build step — drop two <link> tags into any HTML file and you're live.
  • 3-layer token system — palette → semantic → shape. Change one variable, every component updates.
  • Dark-mode first — looks great on dark backgrounds by default, with full light-mode support.
  • 28+ JS behaviours — scroll reveal, modals, tabs, accordions, lightbox, audio, countdown, toasts, command palette, and more — all via data-dh-* attributes.
  • 6 addon packs — Dashboard, GenAI, Transport, Commerce, Media, Social. Load only what you need.
  • WCAG 2.1 AA accessible — focus traps, ARIA roles, keyboard nav, skip-nav, reduced-motion aware.
  • MIT license — use it anywhere, white-label it freely.

Quick Start

Option A — CDN (pinned v2.5.0)

The fastest way to get started. Add to your <head> and before </body>:

HTML
<!-- In <head> -->
<link rel="stylesheet" href="https://hellodjt.com/cdn/v2.5.0/dothello.min.css">
<link rel="stylesheet" href="https://hellodjt.com/cdn/v2.5.0/tokens.css">

<!-- Before </body> -->
<script src="https://hellodjt.com/cdn/v2.5.0/dothello.min.js"></script>
<script>DH.init();</script>

Option B — Local install (from zip)

Download the core zip from the showcase, extract it, then reference locally:

HTML
<link rel="stylesheet" href="css/dothello.css">
<link rel="stylesheet" href="css/tokens.css">

<script src="js/dothello.js"></script>
<script>DH.init();</script>
Tip: Always load tokens.css after dothello.css so your overrides take precedence.

File Structure

The core zip contains everything you need to get started:

ZIP contents — dothello-core-v2.5.0.zip
dothello-core-v2.5.0.zip
├── dothello.css          ← full source CSS
├── dothello.min.css      ← minified CSS (use in production)
├── dothello.js           ← full source JS
├── dothello.min.js       ← minified JS (use in production)
├── tokens.css            ← example project token overrides
├── tokens-template.css   ← white-label starting point (13 sections)
└── starter.html          ← minimal boilerplate page

tokens-template.css is the white-label starting point. It contains 13 clearly-labelled sections: Brand · On-Color · Surfaces · Status · Nav · Focus · Typography · Spacing · Radius · Shape · Shadows · Motion · Addon Dimensions. Copy it, rename it, fill in your values.

The full-kit zip (dothello-full-kit-v2.5.0.zip) includes the above plus all 6 addon CSS/JS pairs.

Token Overview

dotHello uses a 3-layer token system. Override at the right layer and changes propagate everywhere automatically.

  • Layer 1 — Palette — raw values (--dh-color-primary: #00e5a0, --dh-color-dark: #0a0a0f). Foundation layer — rarely overridden directly.
  • Layer 2 — Semantic aliases — intent-named tokens (--dh-color-bg, --dh-color-surface, --dh-color-on-primary). This is the main override layer for theming.
  • Layer 3 — Shape tokens — component geometry (--dh-btn-radius, --dh-card-radius, --dh-modal-radius). Override to change the "feel" of the UI.

All components reference the semantic layer — never the palette directly. This means overriding one semantic token updates every component that uses it.

How to white-label

your-tokens.css
/* 1. Copy tokens-template.css from the zip */
/* 2. Load it after dothello.css */
<link rel="stylesheet" href="css/dothello.css">
<link rel="stylesheet" href="css/your-tokens.css">

/* 3. Override what you need */
:root {
  --dh-color-primary: #6366f1;    /* your brand color */
  --dh-btn-radius:    6px;        /* square buttons instead of pill */
  --dh-font-body:     'Inter', sans-serif;
}

Palette Tokens

Raw foundation values. Components never reference these directly — they go through the semantic layer.

TokenDefaultPurpose
--dh-color-primary#00e5a0Brand accent — used for buttons, links, highlights
--dh-color-dark#0a0a0fDarkest surface
--dh-color-text#e2e8f0Default body text
--dh-color-text-muted#94a3b8Secondary / subdued text
--dh-color-borderrgba(255,255,255,.1)Default border color
--dh-radius-sm6pxSmall radius
--dh-radius-md10pxMedium radius
--dh-radius-lg16pxLarge radius
--dh-radius-xl24pxExtra-large radius
--dh-font-body'DM Sans', system-uiBody font stack
--dh-font-mono'JetBrains Mono', monospaceMonospace font stack

Semantic Tokens v2.4.0

Intent-named aliases introduced in v2.4.0. Override these for global theming — all components are wired to this layer.

TokenPurpose
--dh-color-on-primaryText rendered on a primary-colored background. Default: var(--dh-color-dark) — dark text is required for WCAG contrast against the mint primary.
--dh-color-bgPage / outermost background
--dh-color-surfaceCard and panel surface
--dh-color-surface-raisedElevated surface (dropdowns, tooltips)
--dh-color-surface-overlayModal overlay / backdrop tint
--dh-color-hoverSubtle hover tint on interactive elements
--dh-color-activeStronger pressed/active tint
--dh-color-success / -bgSuccess status color + background variant
--dh-color-warning / -bgWarning status color + background variant
--dh-color-error / -bgError status color + background variant
--dh-color-info / -bgInfo status color + background variant
--dh-focus-ring-colorFocus outline color (default: primary)
--dh-focus-ring-widthFocus outline width
--dh-focus-ring-offsetFocus outline offset
--dh-nav-bgNavbar background
--dh-nav-bg-scrolledNavbar background after scrolling
--dh-nav-blurNavbar backdrop-filter blur
--dh-nav-heightNavbar height (used for scroll-margin offsets)
--dh-color-nav-linkNav link color
--dh-color-text-adaptiveText that adapts to light/dark context

Shape Tokens v2.5.0

Control the geometry of components without touching component-level CSS. Override once at :root to reshape your entire UI.

TokenDefaultEffect
--dh-btn-radius9999pxAll button border radii (pill by default)
--dh-card-radius16pxAll card border radii
--dh-input-radius8pxAll form input border radii
--dh-modal-radius24pxModal dialog border radius
--dh-drawer-width320pxNav drawer width
Example — squared-off UI
:root {
  --dh-btn-radius:   6px;   /* square buttons */
  --dh-card-radius:  8px;   /* tighter cards */
  --dh-input-radius: 4px;   /* form inputs */
  --dh-modal-radius: 12px;  /* modal corners */
}

Layout & Grid

HTML
<!-- Centered max-width wrapper -->
<div class="dh-container">...</div>

<!-- Responsive grid -->
<div class="dh-grid dh-grid--3">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

<!-- Section vertical spacing -->
<section class="dh-section">...</section>

Grid modifiers: dh-grid--2, dh-grid--3, dh-grid--4. Collapses to single column on mobile. Flex utilities: dh-flex, dh-flex--center, dh-flex--between.

Navigation v2.1.0

dotHello ships 7 navigation patterns. Use one or combine them.

1. Standard Navbar

HTML
<nav class="dh-nav">
  <div class="dh-nav__inner">
    <a class="dh-nav__brand" href="/">Brand</a>
    <button class="dh-nav__toggle" aria-label="Menu">☰</button>
    <ul class="dh-nav__links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <div class="dh-nav__drawer">
      <div class="dh-nav__drawer-backdrop"></div>
      <div class="dh-nav__drawer-panel">
        <!-- mobile nav links -->
      </div>
    </div>
  </div>
</nav>

2. Back to Top

HTML
<button class="dh-back-to-top dh-back-to-top--pill" data-dh-threshold="400">↑ Top</button>

Appears after scrolling past data-dh-threshold pixels. Gets class is-visible automatically.

3. Floating Pill Nav

HTML
<nav class="dh-pill-nav">
  <a class="dh-pill-nav__item is-active" href="#">Home</a>
  <a class="dh-pill-nav__item" href="#about">About</a>
</nav>

4. Stepper

HTML
<div class="dh-stepper">
  <div class="dh-stepper__step is-complete">
    <span class="dh-stepper__marker">✓</span>
    <span class="dh-stepper__label">Account</span>
  </div>
  <div class="dh-stepper__step is-active">
    <span class="dh-stepper__marker">2</span>
    <span class="dh-stepper__label">Details</span>
  </div>
</div>

5. Full-Screen Overlay Nav

HTML
<button data-dh-overlay-open>Menu</button>
<div class="dh-overlay-nav">
  <button class="dh-overlay-nav__close" data-dh-overlay-close>✕</button>
  <nav class="dh-overlay-nav__links">
    <a href="/">Home</a>
  </nav>
</div>

6. Sticky ToC (Table of Contents)

HTML
<nav class="dh-toc" data-dh-scrollspy>
  <p class="dh-toc__title">On this page</p>
  <ul class="dh-toc__list">
    <li class="dh-toc__item">
      <a class="dh-toc__link" href="#section-one">Section One</a>
    </li>
  </ul>
</nav>

Active link gets class is-active (primary color + left border) as the user scrolls. Requires DH.initScrollspy() or DH.init().

7. Command Palette v2.1.0

HTML + JS
<!-- Trigger button -->
<button class="dh-btn dh-btn--ghost" data-dh-cmd-open>Search ⌘K</button>

<!-- Register commands via JS -->
<script>
DH.registerCommands([
  {
    title: 'Home',
    desc:  'Go to homepage',
    group: 'Navigate',
    icon:  '🏠',
    href:  '/'
  },
  {
    title:    'Toggle dark mode',
    group:    'Actions',
    icon:     '🌙',
    action:   () => DH.toggleDarkMode(),
    shortcut: '⌘D'
  }
]);
</script>

Keyboard: ⌘K / Ctrl+K to open · ↑↓ navigate · Enter select · Esc close.

App Shell v2.2.0

A three-column CSS grid layout (sidebar + main + optional right aside) designed for dashboard and docs-style UIs.

HTML
<div class="dh-app-shell">

  <aside class="dh-app-shell__sidebar">
    <nav class="dh-sidebar">
      <div class="dh-sidebar__brand">MyApp</div>
      <div class="dh-sidebar__group">
        <span class="dh-sidebar__group-label">Main</span>
        <a class="dh-sidebar__item is-active" href="#dashboard">
          <span class="dh-sidebar__icon">📊</span>
          <span class="dh-sidebar__label">Dashboard</span>
        </a>
      </div>
    </nav>
  </aside>

  <main class="dh-app-shell__main">
    <!-- page content -->
  </main>

  <aside class="dh-app-shell__aside">
    <!-- optional right panel -->
  </aside>

</div>

Modifiers: dh-app-shell--no-aside hides the right panel. CSS vars: --dh-shell-sidebar-w: 240px · --dh-shell-main-max: 960px · --dh-shell-aside-w: 256px. Collapse sidebar to icon rail with dh-sidebar--collapsed.

Buttons

HTML
<!-- Variants -->
<button class="dh-btn dh-btn--primary">Primary</button>
<button class="dh-btn dh-btn--ghost">Ghost</button>
<button class="dh-btn dh-btn--outline">Outline</button>

<!-- Sizes -->
<button class="dh-btn dh-btn--primary dh-btn--sm">Small</button>
<button class="dh-btn dh-btn--primary dh-btn--lg">Large</button>

<!-- States -->
<button class="dh-btn dh-btn--primary" disabled>Disabled</button>
<button class="dh-btn dh-btn--primary is-loading">Loading</button>

Shape is controlled by --dh-btn-radius. Default is pill (9999px). Override globally or per-element.

Hero

HTML
<section class="dh-hero">
  <div class="dh-hero__badge">New</div>
  <h1 class="dh-hero__title">Your headline</h1>
  <p class="dh-hero__sub">Supporting text goes here.</p>
  <div class="dh-hero__cta">
    <button class="dh-btn dh-btn--primary dh-btn--lg">Get started</button>
    <button class="dh-btn dh-btn--ghost dh-btn--lg">Learn more</button>
  </div>
</section>

Cards

HTML
<div class="dh-card">
  <div class="dh-card__media">
    <img src="image.jpg" alt="Description">
  </div>
  <div class="dh-card__body">
    <div class="dh-card__badge">Tag</div>
    <h3 class="dh-card__title">Card title</h3>
    <p class="dh-card__text">Description text.</p>
    <div class="dh-card__footer">
      <button class="dh-btn dh-btn--primary dh-btn--sm">Action</button>
    </div>
  </div>
</div>

Card radius is controlled by --dh-card-radius (default 16px). Use dh-card--horizontal for a side-by-side layout.

Forms v2.0.0

Standard inputs

HTML
<div class="dh-form-group">
  <label class="dh-label">Email</label>
  <input class="dh-input" type="email" placeholder="[email protected]">
</div>
<div class="dh-form-group">
  <label class="dh-label">Plan</label>
  <select class="dh-select">
    <option>Starter</option>
    <option>Pro</option>
  </select>
</div>

Floating labels

HTML
<div class="dh-float-label">
  <input class="dh-input" id="fl-email" type="email" placeholder=" ">
  <label for="fl-email">Email address</label>
</div>

Input group

HTML
<div class="dh-input-group">
  <span class="dh-input-group__prepend">@</span>
  <input class="dh-input" type="text" placeholder="username">
  <button class="dh-btn dh-btn--primary">Submit</button>
</div>

Checkbox, Radio, Switch, Range

HTML
<!-- Checkbox -->
<label class="dh-checkbox">
  <input type="checkbox">
  <span class="dh-checkbox__box"></span>
  <span>Accept terms</span>
</label>

<!-- Switch -->
<label class="dh-switch">
  <input type="checkbox">
  <span class="dh-switch__track"></span>
  <span class="dh-switch__label">Enable notifications</span>
</label>

<!-- Range slider -->
<input class="dh-range" type="range" min="0" max="100">

Modal

HTML
<!-- Trigger -->
<button class="dh-btn dh-btn--primary" data-dh-modal-open="my-modal">Open</button>

<!-- Modal -->
<div class="dh-modal" id="my-modal">
  <div class="dh-modal__dialog">
    <div class="dh-modal__header">
      <h3 class="dh-modal__title">Modal title</h3>
      <button class="dh-modal__close" data-dh-modal-close>✕</button>
    </div>
    <div class="dh-modal__body">Content goes here.</div>
    <div class="dh-modal__footer">
      <button class="dh-btn dh-btn--ghost" data-dh-modal-close>Cancel</button>
      <button class="dh-btn dh-btn--primary">Confirm</button>
    </div>
  </div>
</div>

Size modifiers on dh-modal__dialog: --sm · --lg · --xl · --full. Focus is trapped inside while open. Esc closes.

Tabs

HTML
<div class="dh-tabs" data-dh-tabs>
  <div class="dh-tabs__nav">
    <button class="dh-tabs__tab is-active" data-tab="tab1">Tab 1</button>
    <button class="dh-tabs__tab" data-tab="tab2">Tab 2</button>
  </div>
  <div class="dh-tabs__panel is-active" id="tab1">Panel 1</div>
  <div class="dh-tabs__panel" id="tab2">Panel 2</div>
</div>

Accordion

HTML
<div class="dh-accordion" data-dh-accordion>
  <div class="dh-accordion__item">
    <button class="dh-accordion__trigger">Question one?</button>
    <div class="dh-accordion__panel">Answer content.</div>
  </div>
  <div class="dh-accordion__item">
    <button class="dh-accordion__trigger">Question two?</button>
    <div class="dh-accordion__panel">Answer content.</div>
  </div>
</div>

Dropdown

HTML
<div class="dh-dropdown" data-dh-dropdown>
  <button class="dh-btn dh-btn--outline dh-dropdown__trigger">Options ▾</button>
  <div class="dh-dropdown__menu">
    <a class="dh-dropdown__item" href="#">Edit</a>
    <a class="dh-dropdown__item" href="#">Duplicate</a>
    <div class="dh-dropdown__divider"></div>
    <a class="dh-dropdown__item dh-dropdown__item--danger" href="#">Delete</a>
  </div>
</div>

Badges & Alerts

HTML
<!-- Badges -->
<span class="dh-badge">Default</span>
<span class="dh-badge dh-badge--primary">Primary</span>
<span class="dh-badge dh-badge--success">Success</span>
<span class="dh-badge dh-badge--warning">Warning</span>
<span class="dh-badge dh-badge--danger">Danger</span>

<!-- Alerts (v2.0.0) -->
<div class="dh-alert dh-alert--info">
  <strong>Info:</strong> Something worth knowing.
</div>
<div class="dh-alert dh-alert--success">Changes saved.</div>
<div class="dh-alert dh-alert--warning">Proceed with caution.</div>
<div class="dh-alert dh-alert--danger">Action failed.</div>

Toasts

JS API (recommended)
DH.showToast('Saved successfully!', 'success');
DH.showToast('Something went wrong.', 'error');
DH.showToast('Check your settings.', 'warning');
DH.showToast('Update available.', 'info');

// With options
DH.showToast('Done!', 'success', { duration: 5000 });
HTML (static)
<div class="dh-toast dh-toast--success" data-dh-toast>
  <span class="dh-toast__icon">✓</span>
  <span class="dh-toast__message">Saved!</span>
  <button class="dh-toast__close">✕</button>
</div>

Progress & Skeleton

HTML
<!-- Progress bar -->
<div class="dh-progress">
  <div class="dh-progress__bar" style="width: 65%"></div>
</div>

<!-- Spinner -->
<div class="dh-spinner"></div>
<div class="dh-spinner dh-spinner--sm"></div>

<!-- Skeleton loaders -->
<div class="dh-skeleton dh-skeleton--text"></div>
<div class="dh-skeleton dh-skeleton--avatar"></div>
<div class="dh-skeleton dh-skeleton--rect" style="height:120px"></div>

Audio Player v1.2.0

Two visual styles sharing the same HTML5 engine.

HTML
<!-- Classic — retro iPod style -->
<div class="dh-audio dh-audio--classic" data-dh-audio>
  <audio src="track.mp3"></audio>
</div>

<!-- Modern — Apple Music style -->
<div class="dh-audio dh-audio--modern" data-dh-audio>
  <audio src="track.mp3"></audio>
  <div class="dh-audio__artwork">
    <img src="cover.jpg" alt="Album art">
  </div>
</div>

Lightbox & Gallery

HTML
<div class="dh-gallery" data-dh-lightbox>
  <a class="dh-gallery__item" href="full-1.jpg">
    <img src="thumb-1.jpg" alt="Photo one">
  </a>
  <a class="dh-gallery__item" href="full-2.jpg">
    <img src="thumb-2.jpg" alt="Photo two">
  </a>
</div>

Keyboard: ← / → to navigate · Esc to close.

Pricing

HTML
<div class="dh-pricing-grid">

  <div class="dh-pricing-card">
    <div class="dh-pricing-card__name">Starter</div>
    <div class="dh-pricing-card__price">
      <span class="dh-pricing-card__amount">$9</span>/mo
    </div>
    <ul class="dh-pricing-card__features">
      <li>5 projects</li>
      <li>1 GB storage</li>
    </ul>
    <button class="dh-btn dh-btn--outline dh-btn--lg" style="width:100%">Get started</button>
  </div>

  <div class="dh-pricing-card dh-pricing-card--featured">
    <div class="dh-pricing-card__name">Pro</div>
    <div class="dh-pricing-card__price">
      <span class="dh-pricing-card__amount">$29</span>/mo
    </div>
    <ul class="dh-pricing-card__features">
      <li>Unlimited projects</li>
      <li>50 GB storage</li>
    </ul>
    <button class="dh-btn dh-btn--primary dh-btn--lg" style="width:100%">Get Pro</button>
  </div>

</div>

Initialization

Call DH.init() once after the DOM is ready to activate all behaviours automatically. Or call individual init functions if you only need specific features.

JS — full init
DH.init(); // initializes everything at once
JS — selective init
DH.initScrollReveal();
DH.initDarkMode();
DH.initModals();
DH.initTabs();
DH.initAccordion();
DH.initDropdowns();
DH.initLightbox();
DH.initCountdown();
DH.initAudio();
DH.initProgress();
DH.initSkeleton();
DH.initForms();
DH.initToasts();
DH.initVideoEmbed();
DH.initParallax();
DH.initLottie();
DH.initSmoothScroll();
DH.initPanel();
DH.initCodeCopy();
DH.initAutoContrast();
DH.initBackToTop();
DH.initScrollspy();
DH.initCommandPalette();
DH.initCarousel();
DH.initBottomTabBar();
DH.initStepper();
DH.initScrollDrivenParallax();

All Behaviours

All interactive features are activated with data-dh-* HTML attributes — no custom JS required.

AttributeElementPurpose
data-dh-revealanyScroll reveal — default fade-in
data-dh-reveal="fade-up|fade-in|slide-left|slide-right|zoom|flip|rotate"anySpecific reveal variant
data-dh-staggerparentStagger-delay children reveals
data-dh-modal-open="id"buttonOpen named modal
data-dh-modal-closebuttonClose current modal
data-dh-tabswrapperEnable tabs behaviour
data-dh-accordionwrapperEnable accordion behaviour
data-dh-dropdownwrapperEnable dropdown behaviour
data-dh-audio.dh-audioInit HTML5 audio player
data-dh-lightboxgallery wrapperEnable lightbox
data-dh-carousel.dh-carouselEnable carousel
data-dh-countdown="YYYY-MM-DD"anyCountdown to date
data-dh-parallaxanyParallax scroll effect
data-dh-lottie="url"anyLoad Lottie animation
data-dh-smooth-scroll<a>Smooth scroll to anchor
data-dh-panelbuttonPanel transition
data-dh-code-copy<pre>Add copy button to code block
data-dh-scrollspy<nav>Active link tracking on scroll
data-dh-cmd-openbuttonOpen command palette
data-dh-threshold="N".dh-back-to-topShow after N px scrolled
data-dh-overlay-openbuttonOpen full-screen overlay nav
data-dh-overlay-closebuttonClose full-screen overlay nav
data-dh-dark-togglebuttonToggle dark/light mode

Scroll Animations v1.8.0

HTML
<!-- Basic reveal (default: fade-in) -->
<div data-dh-reveal>Fades in on scroll</div>

<!-- Variants -->
<div data-dh-reveal="fade-up">Slides up</div>
<div data-dh-reveal="slide-left">Slides from left</div>
<div data-dh-reveal="zoom">Zooms in</div>
<div data-dh-reveal="flip">Flips in</div>
<div data-dh-reveal="rotate">Rotates in</div>

<!-- Stagger children -->
<div data-dh-stagger>
  <div data-dh-reveal="fade-up">Item 1</div>
  <div data-dh-reveal="fade-up">Item 2</div>
  <div data-dh-reveal="fade-up">Item 3</div>
</div>

<!-- Parallax -->
<div data-dh-parallax style="--dh-parallax-speed: 0.3">
  Background layer
</div>
Reduced motion: All animations automatically respect prefers-reduced-motion: reduce. No extra work required.

Dark Mode v1.6.0

JS
// Auto-detect OS preference and persist to localStorage
DH.initDarkMode();

// Toggle button — add to any button element
<button data-dh-dark-toggle>Toggle theme</button>

// Programmatic control
DH.setDarkMode(true);    // force dark
DH.setDarkMode(false);   // force light
DH.toggleDarkMode();     // toggle current state

Dark mode adds class dh-dark to <html>. Preference is saved in localStorage. Use the class in your own CSS:

CSS
/* Styles only apply in dark mode */
.dh-dark .my-element {
  background: #111;
  color: #e2e8f0;
}

Accessibility v1.7.0

  • ARIA roles — all interactive components include role, aria-expanded, aria-controls, aria-selected as appropriate.
  • Focus trap — modals trap focus within the dialog. Tab / Shift+Tab cycle only within the open modal. Esc closes.
  • Skip navigation — add as the first element in <body>:
HTML
<a class="dh-skip-nav" href="#main-content">Skip to content</a>
  • Keyboard navigation — all dropdowns, tabs, accordions, modals, carousels support full keyboard control.
  • Reduced motion — all animations check prefers-reduced-motion: reduce and disable or simplify automatically.
  • Focus ring — controlled via tokens: --dh-focus-ring-color, --dh-focus-ring-width, --dh-focus-ring-offset.
  • Contrast — primary #00e5a0 on dark surfaces passes WCAG AA. --dh-color-on-primary ensures dark text on primary-colored backgrounds.
Part 2 — Addons

Dashboard Addon v2.5.0

📊

Requires dothello-dashboard.min.css and dothello-dashboard.min.js loaded after core. Init with DH.initDashboard().

Load order

HTML
<!-- Core first -->
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="tokens.css">
<!-- Then addon -->
<link rel="stylesheet" href="dothello-dashboard.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-dashboard.min.js"></script>
<script>
  DH.init();
  DH.initDashboard();
</script>

Key components

  • Grid layout — dh-dash-grid, dh-dash-grid__col
  • Topbar — dh-dash-topbar, dh-dash-topbar__title, dh-dash-topbar__actions
  • Stat cards — dh-dash-stat with trend badge (--up / --down)
  • Charts — SVG line, bar, donut — dh-dash-chart
  • Data table — sortable + filterable — dh-dash-table
  • Date range picker — dh-dash-daterange
  • Empty states — dh-dash-empty

Example

HTML — stat card
<div class="dh-dash-stat">
  <div class="dh-dash-stat__label">Monthly Revenue</div>
  <div class="dh-dash-stat__value">$24,500</div>
  <div class="dh-dash-stat__trend dh-dash-stat__trend--up">+12% ↑</div>
</div>

View full Dashboard catalog →

GenAI Addon v2.5.0

🤖

Requires dothello-genai.min.css and dothello-genai.min.js loaded after core. Init with DH.GenAI.init().

Load order

HTML
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="dothello-genai.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-genai.min.js"></script>
<script>DH.init(); DH.GenAI.init();</script>

Key components (32 total)

  • Prompt input with send button
  • Streaming text bubble, tool use indicator, citation chips
  • Canvas / artifact panel, model selector, persona avatar
  • Step tracker, approval gate, confidence meter
  • Usage dashboard, thread branching, memory panel, history sidebar
  • Feedback bar, toast notifications

Example

HTML — prompt input
<div class="dh-genai-prompt">
  <textarea class="dh-genai-prompt__input"
            placeholder="Ask anything…"></textarea>
  <button class="dh-btn dh-btn--primary dh-genai-prompt__send">Send</button>
</div>

View full GenAI catalog →

Transport Addon v2.5.0

✈

Requires dothello-transport.min.css and dothello-transport.min.js loaded after core. Init with DH.Transport.init().

Load order

HTML
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="dothello-transport.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-transport.min.js"></script>
<script>DH.init(); DH.Transport.init();</script>

Key components (18 total)

  • Booking widget — 7 modes: one-way, round-trip, multi-city, hotel, car, activity, package
  • Fare cards, price calendar, seat map
  • Route / leg display, departure board, itinerary timeline
  • Boarding pass, ticket + QR code, live status, ETA strip
  • Alerts, capacity bar, driver card, fleet cards, amenities, reviews, baggage

Example

HTML — fare card
<div class="dh-transport-fare">
  <div class="dh-transport-fare__class">Economy</div>
  <div class="dh-transport-fare__price">$199</div>
  <ul class="dh-transport-fare__perks">
    <li>1 carry-on</li>
    <li>Seat selection</li>
  </ul>
  <button class="dh-btn dh-btn--primary">Select</button>
</div>

View full Transport catalog →

Commerce Addon v2.5.0

🛒

Requires dothello-commerce.min.css and dothello-commerce.min.js loaded after core. Init with DH.Commerce.init().

Load order

HTML
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="dothello-commerce.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-commerce.min.js"></script>
<script>DH.init(); DH.Commerce.init();</script>

Key components (14 sections)

  • Product grid + detail page, star ratings + reviews, inventory badge
  • Shopping cart drawer, discount codes, promo banner
  • Payment methods, order confirmation, order history + detail
  • Invoice, shipping methods, shipment tracking

Example

HTML — cart item
<div class="dh-commerce-cart-item">
  <img class="dh-commerce-cart-item__img"
       src="product.jpg" alt="Product">
  <div class="dh-commerce-cart-item__info">
    <div class="dh-commerce-cart-item__name">Product Name</div>
    <div class="dh-commerce-cart-item__price">$49.00</div>
  </div>
  <button class="dh-commerce-cart-item__remove">✕</button>
</div>

View full Commerce catalog →

Media Addon v2.5.0

🎬

Requires dothello-media.min.css and dothello-media.min.js loaded after core. Init with DH.Media.init().

Load order

HTML
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="dothello-media.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-media.min.js"></script>
<script>DH.init(); DH.Media.init();</script>

Key components

  • Media catalog grid, media card (poster + metadata overlay)
  • Video player, playlist panel
  • Series / season browser, content rating badge
  • Watch progress bar, hero banner

Example

HTML — media card
<div class="dh-media-card">
  <div class="dh-media-card__poster">
    <img src="poster.jpg" alt="Title">
    <div class="dh-media-card__overlay">
      <button class="dh-btn dh-btn--primary">▶ Play</button>
    </div>
  </div>
  <div class="dh-media-card__meta">
    <h4 class="dh-media-card__title">Movie Title</h4>
    <span class="dh-media-card__year">2024</span>
  </div>
</div>

View full Media catalog →

Social Addon v1.2.0

💬

Requires dothello-social.min.css and dothello-social.min.js loaded after core. Init with DH.initSocial(). All components use the dh-sm-* prefix.

Load order

HTML
<link rel="stylesheet" href="dothello.min.css">
<link rel="stylesheet" href="dothello-social.min.css">

<script src="dothello.min.js"></script>
<script src="dothello-social.min.js"></script>
<script>DH.init(); DH.initSocial();</script>

Key components (23 init functions · 13+ custom events)

  • Feed — post cards (8 variants: text, image-grid, reply, link-preview, poll, quote, pinned, draft/scheduled), action bar, compose (inline + modal), feed header + tabs, new-posts banner
  • Profile — profile header, profile tabs, media grid, user hover card, context menu
  • Stories — story circles
  • Messaging — DM inbox, thread, composer
  • Sidebar — trending topics, who-to-follow, search
  • Interactions — reaction picker, repost sheet, share sheet, audience selector
  • Notifications — notification bell + dropdown, notification items
  • Discovery — thread depth view, user list modal, search results, empty states (6 variants)
  • Extras — premium gate (overlay + card), attachment preview strip, mutual followers row

Example

HTML — post card
<div class="dh-sm-post">
  <div class="dh-sm-post__header">
    <div class="dh-sm-avatar"></div>
    <div class="dh-sm-post__meta">
      <span class="dh-sm-post__name">Display Name</span>
      <span class="dh-sm-post__handle">@handle</span>
      <span class="dh-sm-post__time">2h</span>
    </div>
  </div>
  <div class="dh-sm-post__body">
    Post content goes here.
  </div>
  <div class="dh-sm-post__actions">
    <button class="dh-sm-action-btn">💬 12</button>
    <button class="dh-sm-action-btn">🔁 5</button>
    <button class="dh-sm-action-btn">❤️ 48</button>
  </div>
</div>

View full Social catalog →

🔍 Esc
↑↓ navigate ↵ select Esc close