UI kit / Examples

Components

Export CSV New item

Every class in td-ui.css on one page. Check it in light and dark (user menu), with the sidebar collapsed, under 900px wide, and in print preview after every kit change.

Saved A server rendered toast. It leaves after 6 seconds.
Stat tile1,240
Stat tile that links (hover)48
Dollar amount$3,250

Card with a footer

Connected

Short text.

Longer card

Not set up

More text in this card makes it taller. The footer of the shorter card next to it still lines up with this one, at the bottom.

A second line of detail.

Buttons

Alerts

Note Information for the person reading.
Saved The record was saved.
Shown once Copy this password now. It will not be shown again.
Error Some fields need attention.

Status chips, badges, and text

Certificate issued Awaiting certificate Wipe failed In progress Scheduled 12 Laptop

Job number (.code-id)
ITAD-2610001
Asset tag (.code-id-lg)
ITAD-2610001-001
Serial (.mono)
S4EVNX0N912345L
Hash (.mono)
9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
Number (.num)
1,240.50 lb
Muted, small
Muted text. Small text.
Brand marks (.brand-mark)
Gorelo   Microsoft   Dell   Lenovo (small, muted)
Social links (.social-links)
Wordmark (.wordmark)
TechDynamix

Form fields

Every field type must be the same height, font, and border.

Fieldset with choices

List page

View all
JobClientStatusDrives
ITAD-2610001Example ClientCertificate issued24
Open
ITAD-2610002Example ClientAwaiting certificate8
Open

Change table (.diff)

StatusScheduledReceived
Item count2024

Photo grid

Example photo
Front10:16
Example photo
Serial label

Confirm dialog and toasts

Put data-confirm on a form or submit button. The dialog names the action, and Cancel has focus.

Shown only when printed (.print-only).

Copy and secrets

Copy button (data-copy)
ITAD-2610001
Copy from an element (data-copy-from)
10.10.0.1
Masked key (.masked), never shown again
1f5e86gh
Password with Show and Copy (.secret-field, data-reveal)
Kx7!2m9Q

Filter and sort a table

ClientStateSeatsSince
Example HealthOH4803/01/2021
Example ManufacturingPA11207/15/2019
Example Law GroupOH1711/02/2023

Tabs, dropdown, accordion

In-page tabs (role="tablist"). Arrow keys move between them. Tabs that go to other addresses are nav.tabs with links.

More actions
EditDuplicate

Accordion section (details.accordion)

Open by default.

Another section

Closed until clicked.

Switch, stepper, progress, loading

  1. Company
  2. Network
  3. Review
Uploading (progress.progress)62%
62%
Working, no end known

Timeline and drop zone

  1. Received

    4 assets counted, seal intact.

    10/21/2026 11:05 AM
  2. Picked up10/21/2026 9:40 AM

    Kanban (.kanban)

    To do

    2
    1. Image 22 workstationsExample Health
    2. Renew the portal certificateOverdue

    Doing

    1
    1. Wi-Fi surveyExample Manufacturing

    Done

    0

      Drag, or focus a card and press Alt with the arrow keys. Full board: kanban.html.

      Photo viewer, slideshow, video, map

      Rack, front
      data-viewer
      Patch panel
      Closet, wide
      Rack, front
      Rack, front
      Switch ports
      Switch ports
      1 of 2
      figure.videoVideo: Pexels
      Street map of central Mentor, OhioExample Health
      .map with a .map-pin at data-x 50, data-y 50Map data © OpenStreetMap contributors

      Secret, log, empty, divider

      tdx-7Hq2-pL9w-Xk4m
      [10:16:02] Pass 1 of 1: writing zeros [10:48:31] Verify: 100% sampled, no mismatches
      or

      Nothing here yet.