Data components demo
Data display components styled through the frozen
nx-* vocabulary. Toggle any token in the Design Token Panel to see all components update live.Stat cards
Big number:
.nx-stat-card__value → --nx-text-page-title + --nx-color-primary.1,284Active users
94%Uptime
32msAvg latency
Profile cards
Avatar:
.nx-profile-card__avatar → --nx-size-avatar-md + --nx-color-accent.Alice MartinAdmin
Bob ChenEditor
Media card
Thumbnail:
.nx-media-card__thumb with 16:9 aspect ratio. Width capped at 24rem (component-local constraint).Intro to Design Tokens
Design tokens are the smallest atomic values in a design system — spacing, colour, typography — stored as CSS custom properties and shared across every component.
Avatar row
Each avatar reads background from
var(--nx-palette-N) (inline style — runtime index). Size from --nx-size-avatar-sm.Data table
.nx-table — collapsed borders, cell padding from --nx-hsp-xs/sm, header from --nx-code-bg.| Name | Role | Actions | |
|---|---|---|---|
| Alice Martin | alice@example.com | Admin | |
| Bob Chen | bob@example.com | Editor | |
| Carol Davis | carol@example.com | Viewer | |
| Diana Prince | diana@example.com | Editor | |
| Evan Torres | evan@example.com | Viewer |