DataBlock
O DataBlock informa dados e informações específicas com grande destaque, permitindo identificação de tendências, comparações ou progresso em relação a uma meta. Veja as diretrizes de escrita de numerais no Guia de Escrita.
É usado para mostrar rapidamente um dado de grande importância, que entrega análises pré-formatadas (comparações, tendências e relações) que facilitam a compreensão das informações.
Este componente dá foco a um único dado e, por isso, não deve ser usado quando existe um grande volume de informação. Nestes casos, utilize Listas ou Tabelas.
Padrão
Use quando existe um dado que precisa ser destacado. Neste caso, os elementos obrigatórios são rótulo e valor numérico.
Explicação do rótulo
É possível adicionar um tooltip ao lado do rótulo, quando necessário, para explicar seu significado.
Tendência e Comparação
Use quando o dado principal está relacionado a um período de tempo ou meta, e quando a intenção é mostrar a tendência ou progresso deste dado. É possível usar um gráfico simples de tendência ou apresentar o número ligado ao dado principal, neste caso como porcentagem.
Prefixo e sufixo
Elementos indicativos exibidos antes ou depois do valor.
Alinhamento
Os elementos internos de um data block devem estar alinhados apenas à esquerda ou ao centro.
Internacionalização
O componente deve ter espaço suficiente, prevendo diferentes idiomas. O valor apresentado não deve quebrar linhas ou ser escondido pelo layout.
Boas práticas
Valores não podem quebrar em duas linhas.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.