Card Big Numbers
Componente visual para destaque de métricas ou informações numéricas (Big Numbers). É projetado para uso em Landing Pages, dashboards ou telas onde métricas principais precisam de ênfase visual imedia
Uso
Utilizado para dar ênfase a um indicador numérico principal. É composto por um número de grande destaque e um texto complementar (obrigatório) abaixo para contextualizar a métrica.
Regras de Conteúdo:
O componente não deve ser utilizado para exibir o valor "0". Caso a métrica seja zero, o card não deve ser renderizado.
Anatomia
❖. Container
Descrição: Elemento principal que agrupa o 'Number' e a 'Description' e define os limites visuais do card.
Regras de Comportamento:
O container não é interativo (não é clicável).
O container utiliza uma borda (ou sombra) para definir seus limites visuais.
1. Number
Descrição: Elemento numérico de maior destaque visual. Recebe o valor da métrica a ser exibida.
Regras de Conteúdo:
Formato: O formato do número é contextual, não havendo obrigação de ser apenas um número inteiro (pode aceita moedas, percentuais, etc.).
Extensão: Se o número for muito extenso para o espaço do card, a compactação (ex: "K" para milhares, "M" para milhões) é obrigatória. O número não deve quebrar linha ou ser truncado.
2. Description
Descrição: Elemento de texto, posicionado abaixo do 'Number'. Fornece contexto ou a descrição do que a métrica representa.
Regras de Conteúdo:
Obrigatoriedade: O componente não deve ser utilizado sem este texto.
Extensão: O conteúdo é contextual ao local de uso. No entanto, o foco principal do componente é o 'Number', portanto, o texto complementar deve ser breve (recomendado o máximo de 2 a 3 linhas) e pensado com cautela. Se o texto ultrapassar essa recomendação, ele deve quebrar para linhas subsequentes, aumentando a altura do card.
Alinhamento
O conteúdo interno do card (Number e Description) deve ser sempre alinhado ao centro horizontalmente e ao topo verticalmente (caso o card cresça em altura).
Posicionamento
O componente possui uma largura mínima de 120px. Esta regra permite que os cards fluam (wrap) em layouts com espaço horizontal disponível (ex: desktop, tablet).
O espaçamento (gap) entre os cards (tanto horizontal quanto vertical, quando empilhados) deve utilizar o Gutter padrão definido no grid system.
Layout responsivo
Quando o espaço horizontal é restrito (ex: dispositivos móveis), ou quando o mínimo de 120px é atingido, os cards quebram para a linha seguinte.
Nesses cenários (mobile), o card deve se adaptar para ocupar 100% da largura da tela, sendo empilhado verticalmente.
❌ Don't
Não utilize este componente para exibir informações que não sejam métricas (ex: títulos curtos ou blocos de texto). A função dele é exclusiva para destaque numérico.
Histórico de Atualizações
Atualizado