Alerts

Alert with Title

Avatar

Placeholder (no image)

Badges

Inline usage: Notifications 3 and status Active badges.

Blockquote

This is a blockquote for highlighting important text, quotes, or callouts. It uses a left border for visual emphasis.

Board

Kanban — columns of cards, drag a card onto another column (JS toggles the .dragging and .drag-over flag classes)

Buttons

With label (resize to see desktop)

Icon only

Cards

Code

Inline code: use font-family: monospace for code elements.

// Code block example
function greet(name) {
    return "Hello, " + name;
}

greet("World");

Description List

Vertical — label above value

Horizontal — side by side

Between — value pushed to the end

Grid — four columns, label above value

Horizontal — value containing a form (select + save button, for review)

Emphasis

Black label, muted value

Bold label, regular value

Regular label, bold value

Vertical — bold label above regular value

Disclosure

Disclosure: Default (closed)

Disclosure: Open by Default

Disclosure: With Longer Content

Disclosure: FAQ Style (multiple)

Divider

Content above divider.

Content below divider.

Dropdown

No dividers (default left-align)

All dividers (.divided)

Divider before section (.dropdown-divider)

Right-aligned (.dropdown.right) — for header/navbar user menus

With icons (.dropdown.right)

Actions menu (button items, no dividers)

Avatar trigger — first letter, right-aligned (user menu pattern)

Item with badge — the badge follows the label, no extra classes

Icon-button trigger (three dots)

Submenu (nested flyout)

Empty States

Empty State: Icon + Title + Description + CTA

Empty State: Icon + Title + CTA

Empty State: Icon + Title + Description

Empty State: Title + Description + CTA

Empty State: Title + CTA

Empty State: Icon + Description

Forms

Input style — border, on white surface

Input style — filled, on white surface

Input style — white, on gray surface

Input style — border, on gray surface

Field — label + input

Field — label + input + hint text

Field — label + input + error message

Form — one field of each remaining type

Grid

Responsive CSS grid. Collapses to 1 column on mobile (≤48rem).

Combine grid + cols-N (desktop) + sm-cols-N (mobile) + gap-N (spacing).

2 columns

3 columns

4 columns → 2 on mobile cols-4 sm-cols-2

4 columns → 4 on mobile cols-4 sm-cols-4

Custom gap cols-3 gap-6

Header

Logo only

Logo + actions

Logo + icon actions

Logo + nav + actions

Logo + search-bar + icon actions

Add Login

Logo + actions + nav + search

Nav + actions (actions stay on the right)

Two navs (left + right aligned)

Centered Logo + Centered Nav

Centered SVG Logo + Centered Nav

Header — primary background, full width

Hero

Default

Centered

Input Group

Input group — search bar (input + search button)

Input group — text prefix + input

Input group — input + text suffix

Input group — input + icon button

Input group — password field with reveal toggle (Filled variant)

Input group — input + two icon buttons

Input group — select + two icon buttons

Row — select + text button (separate controls, not grouped)

Field — label + select + text button + hint text

Input group — select + input + icon button

Lightbox

Full-screen image viewer. One shared <dialog> per page — each trigger swaps the <img> source and calls showModal(). Native <dialog> closes on Escape automatically; the close button calls .close(). Image is centered both axes and capped at viewport size (max-width/height: 100vw/100vh, object-fit: contain) so it never overflows on any device, big or small.

Gestures (script layer, see DESIGN.md → Lightbox): double tap zooms to the tapped spot and back, two fingers pinch-zoom, one finger pans a zoomed image or swipes between pictures at normal size, and a downward swipe closes. With a mouse: double click, wheel and drag. The image sits in a stage with touch-none select-none so the page doesn't steal the gestures; the zoom transform is the one value set from script.

Click a thumbnail to open

Lists

Unordered List

• First item in unordered list
• Second item with longer text content
• Third item

Ordered List

1. First step in ordered process
2. Second step with more detail
3. Third and final step

Unstyled List

• Item without bullet marker
• Another unstyled list item
• Third unstyled item

Modal

Navigation

Horizontal Nav

Horizontal Nav Bold

Horizontal Nav with Dropdown — menu bar (click, then hover switches)

Chips Nav (horizontal scroll)

Vertical Nav

Vertical Nav — Plain (no card)

Vertical Nav — Card (grouped)

Vertical Nav — Divided (no card)

Vertical Nav — Card Divided

Vertical Nav — Card Divided with value and chevron

Vertical Nav — Separated

Tabs

Tabs — Segmented

Tabs — Segmented, long labels

Tabs — Segmented, many long labels (overflow)

Tabs — Segmented + Fit (no scroll, truncate)

Tabs — Segmented + Wrap (labels wrap)

Tabs — Segmented, icon-only (24×24 SVG)

Tabs — Pills

Tabs — Boxed

Tabs — Ghost

Tabs — Bottom nav (icon + label)

Breadcrumb

Chips

Pagination

Left Aligned (default)

Center Aligned

Right Aligned

Row (flex layout)

Horizontal flex with 1rem gap. No default alignment — state it. Different words per axis, so the two "centers" never collide: vertical (align-items) .top / .middle / .bottom; horizontal (justify-content) .start / .center / .end / .between.

Vertical — top / middle / bottom

top-aligned

middle = vertically centered

bottom-aligned

Horizontal — center / between / end

Combine axes — middle + between

Action

Gap sizes — xs / sm / md / default

Override the default 1rem gap. Compose with alignment modifiers.

Section Title

With icon before

Section Title

With chevron after (link)

Section Title

With icon before + chevron after (link)

Section Title

h2 tag, h3 size, tight chevron

Section Title

Long two-line title (h3 size)

This Is a Very Long Section Title That Wraps to Two Lines

Long two-line title (h2 size)

This Is a Very Long Section Title That Wraps to Two Lines

Long two-line title with icon before (h2 size)

This Is a Very Long Section Title That Wraps to Two Lines

Table — Complex (with alignment)

Table — Editable numbers (right-aligned inputs)

Quantity and unit price are inputs; the line total is plain text

Table — Empty state row

No data — one centered gray message spanning all columns

Table — Footer with totals

Footer row — bold total under the numeric column

Table — Header row vertical alignment

Header row — default (vertical middle)

Header row — align-top

Header row — align-bottom

Header cells — text-center and align-top on each cell

Body rows — align-top when cells wrap to multiple lines

Table — Highlighted column, clickable cells

The selected column is light gray, the cells you can edit in it turn darker on hover (empty ones also show a plus), the selected cell has a black outline — a single click opens the editor

Table — Inline Editing

Table — Normal

Table — Rich Content

	Name	Email	Location	Project	Last Active	Revenue	Status
	Anna Lee	anna@example.com	123 Main Street San Francisco, CA 94102	Dashboard Redesign	2 hours ago	$12,450.00	Active
	Mark Chen	mark.chen@company.org	456 Oak Avenue, Apt 12B New York, NY 10001	API Integration	3 days ago	$8,200.00	Away
SM	Sara Müller	s.muller@mail.de	—	—	Never	—	Inactive
	James Wright	j.wright@startup.io	789 Pine Road Austin, TX 73301	Mobile App v2	Just now	$23,100.50	Active

Table — Rowspan (top-aligned label)

When a label cell spans multiple rows (rowspan), the browser default is to vertical-center it across the merged height. Add .align-top to pin it to the top-left instead — reads better when each row below has its own distinct content (e.g. one document with several uploaded files, each on its own row).

File	Document name
	Certificate 2 files	Download
		Download
PDF	Passport copy	Download

Table — Scrollable with sticky header

The wrapper is the scroll surface and the header sticks inside it — fixed height here for the demo; in an app pass the remaining viewport height down instead (see DESIGN.md)

Table — Simple

Table — Striped rows

Every second row has a gray background

Table — With Form Elements

Typography

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph.

This is small text (text-sm) — captions, table metadata, compact UI.

This is extra small text (text-xs) — labels, hints, error messages.

Upload Card

Dropzone-style file input. Click anywhere on the card to open the file picker; the chosen file previews instantly client-side (image thumbnail via URL.createObjectURL(), or a file icon + name for non-images like PDFs) — no upload round-trip needed to see what was picked. The remove button clears the selection and returns to the empty state.

Empty state (click to upload) — field label always visible, like any other input

Certificate

Choose a file PDF, JPG or PNG, up to 5 MB

Multiple files (e.g. passport — front and back, or any number of pages)