Pular para o conteúdo
Faculdade PhorteDesign System

StatCard

Em andamento

Cartão de número em destaque — um valor grande em vermelho e o rótulo embaixo —, para mostrar a escala da instituição em grade.

Função
Conteúdo
Também chamado de
número, estatística, indicador, métrica
Mora em
app/components/molecules/StatCard.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Em Grade
  3. Rótulo longo
  4. Em grupo
  5. Contagem ao rolar
  6. Número grande

Quando usar

Em grade de três ou quatro, para números que provam algo: anos de história, alunos formados, cursos.

Faça

  • Escreva o value como ele deve aparecer ("+250.000", "98%", "4,5"): a contagem lê o número de dentro do texto e termina nele, com o mesmo prefixo, sufixo, milhar e casas (E126).
  • Desligue a contagem (animar={false}) quando o número muda em tempo real.
  • Escreva o valor já formatado, com a unidade ("+30", "250 mil").
  • Rótulo curto que diga o que o número conta.
  • Em grade, ponha os cartões num StatGroup (E72): vira uma lista de definições, e cada número fica ligado ao que mede.

Evite

  • Número sem fonte ou sem data, que envelhece sem ninguém notar.
  • Usar como link: o cartão não é clicável.

Quando não usar. Para uma faixa de números em campanha, use o MetricsBanner. Para um conteúdo com título e texto, o Card.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Cartão — Um Card com o espaço no `CardContent` (E72), texto centrado. No `StatGroup`, o cartão é o par da `<dl>` e leva o espaço.
  2. Valor — `font-black`, vermelho de interface, com o tamanho pelo comprimento (E126): até 6 caracteres, 30/36/48px (celular, tablet, computador); até 9, um degrau abaixo; mais, dois. A largura do valor final fica reservada enquanto conta.
  3. Rótulo — `text-sm`, `--muted-foreground`.
  4. Grupo — `StatGroup`: `<dl>` em grade (duas colunas, quatro a partir de 1024px); no cartão, `dt` o rótulo e `dd` o número, com o número em cima pela ordem visual (`flex-col-reverse`).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoBorda do Card.
HoverNada (E68): o hover de borda saiu, porque o cartão não é clicável.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
O cartão entra na telaO número sobe de zero até o valor em 1,6s (tempo fixo, DURACAO_DA_CONTAGEM), desacelerando no fim, e termina no texto exato — testado na ficha (E126).
Movimento reduzidoNão conta: o número aparece pronto.
Já à vista ao carregarFica pronto: a contagem é para quem rola até o cartão, e o número cheio não cai para zero — testado na ficha.
Dentro de uma caixa que rolaConta quando a caixa rola até ele (E158): "à vista" é o que o navegador mostra de fato, descontado o corte da caixa, e não a altura da janela. Veja a ficha "Contagem ao rolar" — role a caixa. Testado na ficha.
Número longo em cartão estreitoO tamanho desce um ou dois degraus pelo comprimento do texto e, como último recurso, o número quebra dentro do cartão — testado na ficha.
Rótulo longoQuebra linha, centrado.

Relacionados