Examples

Dashboards

Dashboards reference for TicFrame examples, covering usage, accessibility, responsive behavior, dark mode, RTL, source examples, and production guidance.

Requirements

Dashboards is implemented with semantic HTML, TicFrame classes, design tokens, responsive utilities, and documented data attributes. It does not require website-specific CSS.

Use the tf-* namespace consistently so the class validator can prove every visual dependency ships from TicFrame.

Usage Guidance

Start with the semantic element, add the matching TicFrame component or utility classes, and use data attributes only for behavior that TicFrame documents. Keep labels, headings, and landmarks visible to assistive technology.

Responsive

Mobile-first utilities such as md:tf-grid-cols-3 scale the layout.

Dark mode

Colors resolve through data-tf-theme and semantic tokens.

RTL

Logical spacing and direction-aware JS keep the component mirrored safely.

Live Example

This feature uses official TicFrame classes, tokens, and progressive JavaScript where needed.

HTML

<div class="tf-card"><div class="tf-card-body"><p class="tf-text-muted">This feature uses official TicFrame classes, tokens, and progressive JavaScript where needed.</p></div></div>

Reference

Area	Contract
Classes	`tf-container`, `tf-card`, `tf-btn`, and feature-specific `tf-*` classes.
Accessibility	Keyboard access, visible focus, associated labels, ARIA only where native HTML needs support.
JavaScript	Automatic initialization through `TicFrame.init()` and the documented data API.
Tokens	`--tf-color-`, `--tf-space-`, `--tf-radius-`, and `--tf-shadow-`.