Dados

Cartão de indicador

KPI / Stat card

Destaca uma medida com contexto, período e comparação quando relevante.

VISITAS NESTE MÊS12.480↑ 18% em relação ao mês anterior

Exemplo didático · Representação visual do padrão

Quando usar

Resumir uma medida importante em um painel.

Cuidados e acessibilidade

Informe unidade, período e base de comparação; uma seta de alta nem sempre significa algo positivo.

Partes e comportamento

Medida, unidade, período e comparação contextualizada.

Não confunda

Uma métrica isolada não informa tendência sem período e base de comparação.

Exemplo de código

<article>
  <h2>Visitas em setembro</h2>
  <p>12.480</p>
  <p>18% a mais que em agosto.</p>
</article>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Cartão de indicador (KPI / Stat card) em português do Brasil. Destaca uma medida com contexto, período e comparação quando relevante. Contexto de uso: Resumir uma medida importante em um painel. Estrutura: Medida, unidade, período e comparação contextualizada. Referência técnica: <article>. Requisito: Informe unidade, período e base de comparação; uma seta de alta nem sempre significa algo positivo. Considere também: Uma métrica isolada não informa tendência sem período e base de comparação. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗