Componentes/StatCard

StatCard

Card de estatística com valor destaque (36px bold), label e descrição opcional. Variante accent com gradient brand e cor de valor em brand.

Outros

Figma: —

Preview

Default

292

Tokens

Primitivos + semânticos

Componentes

Com código copiável

Layouts

Páginas de referência

Accent

Implementados

Com preview funcional

v1.5

Versão

designtokens.md

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Default -->
<div class="trdr-stat-card">
  <div class="trdr-stat-value">292</div>
  <div class="trdr-stat-label">Tokens</div>
  <div class="trdr-stat-desc">Primitivos + semânticos</div>
</div>

<!-- Accent -->
<div class="trdr-stat-card trdr-stat-card-accent">
  <div class="trdr-stat-value">20</div>
  <div class="trdr-stat-label">Componentes</div>
  <div class="trdr-stat-desc">Implementados com código</div>
</div>

Dimensões

Variante	Largura	Altura
Default	`auto (fill)`	`auto`

Props / Variantes

Prop	Tipo	Valores
`Accent`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
BG	`bg-secondary`	`#0E0E0E`
Border	`border-subtle`	`#222222`
Radius	`radius-md`	`8px`
Padding	`spacing-2xl`	`24px`
Gap	`spacing-xs`	`4px`
Value color	`content-primary`	`#FFFFFF`
Value font	`font-primary`	`JetBrains Mono`
Label color	`content-secondary`	`#E8E8E8`
Desc color	`content-tertiary`	`#A4A4A4`
Accent border	`action-brand-alpha`	`#00D4FF29`
Accent value	`action-brand-default`	`#00D4FF`

Anatomia

[div.trdr-stat-card .trdr-stat-card-accent?]
  ├── [div.trdr-stat-value]  ← font-primary 36px/600, primary (accent: brand)
  ├── [div.trdr-stat-label]  ← 13px/500, secondary
  └── [div.trdr-stat-desc?]  ← 12px, tertiary, margin-top spacing-xs

Default: bg-secondary, border 1px subtle, radius-md, padding spacing-2xl, flex-col gap spacing-xs
Accent: border action-brand-alpha, bg gradient 135deg brand-alpha → bg-secondary