HTML Artifact
Single-file HTML deliverables — dashboards and interactive reports.
A single HTML file that opens offline and looks Ontopix. Pick one of two artefacts — dashboard for scanning, interactive-report for reading.
Two artefacts
| Artefact | Use for | Chrome | Hero device |
|---|---|---|---|
dashboard | SaaS-shape deliverable. Scanning surface, densely-tabular, interactive navigation. Inspired by Nuxt UI Pro Dashboard. | dashboard | forbidden |
interactive-report | Linear readable shape. Client summaries, audit narratives, KB processing reports. Inspired by Nuxt UI's Page / Prose / Toc kits. | interactive-report | allowed |
Pick the artefact at the start. Chrome follows. A report cannot grow a sidebar; a dashboard cannot grow a hero masthead.
Component vocabulary
10 components. Adding an eleventh takes a spec revision.
| Component | Purpose |
|---|---|
data-table | Structured tabular data. Sortable, row-expandable, optional pagination footer. |
tabs | Switch between related views of the same data slice. |
chat-messages | Conversational turns with reasoning + tool-state rendering. Channels the Ontopix agent-conversation idiom. |
timeline | Sequential process visualization. Default token family is phase-* since timelines describe lifecycle state. |
pagination | Page navigation for long data sets. Keep inert when the dataset fits one page. |
card | Grouped content with optional header / body / footer. The base container for stats, summaries, and embedded subsections. |
badge | Compact status / tone indicator. The primary carrier of the semantic token families on densely-tabular surfaces. |
button | User-triggered local action. Never routes; never calls external APIs. |
kbd | Render a keyboard key or chord. UI-channel-native — no legitimate home in print or document channels. |
collapsible | Disclosure section with summary + body. Built on native / ; CSS-only disclosure-triangle rotation. |
Never ship. Routing, localStorage, modals, dialogs, toasts, notifications, command palettes, analytics, telemetry, external API calls. Artefacts are ephemeral hand-off deliverables, not app shells.
Theme
The artefact's :root CSS variables are byte-identical with @ontopix/nuxt-layer-ui's ontopix.css. Swap a palette in the stylebook and both rebuild together. Default light; dark opts in via <html class="dark">.
Browse the full set
See the html-artifact showroom for a live iframe preview of both artefacts, a theme-swap picker, and a component inventory drilldown.
Download
Related
- Channels overview — when to pick this channel over document, slide-deck, or printed-media.
- Colors — palette consumed by
tokens.cssand inlined into each artefact. - Typography → Role Mapping — the font roles each component consumes.
- Document — sibling channel for paginated deliverables when readers print.