SectionItem
- Angular:
mds-section-item - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O SectionItem é um componente utilizado para exibir pares de informações estruturadas (rótulo e valor). Ele organiza dados de leitura rápida em listas ou grades, podendo ser acompanhado de um ícone para reforçar o contexto visual do dado apresentado. ) )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Rótulo (Label): Identifica o que é a informação. Deve ser curto e usar Caixa de Sentença.
- Exemplo: Peso bruto, Data de saída.
- Valor (Value): É o dado propriamente dito. Deve ter maior peso visual (ex: negrito ou cor mais escura) que o rótulo para facilitar a leitura.
- Exemplo: 12.500 kg, 25/05/2026.
- Ícone de Apoio: Utilize ícones para categorizar visualmente o tipo de informação (ex: ícone de calendário para datas, ícone de cifrão para valores monetários).
- Alinhamento: Em listas verticais, mantenha o alinhamento à esquerda. Em cartões de resumo, pode-se utilizar o layout lado a lado (rótulo à esquerda, valor à direita).
- Vá Direto ao Ponto: Não use frases completas nos rótulos.
- Ruim: O nome do motorista é
- Melhor: Motorista
Exemplos de Escrita
Seção intitulada “Exemplos de Escrita”| Contexto | Rótulo (Label) | Valor (Value) | Ícone Sugerido |
|---|---|---|---|
| Veículo | Placa do cavalo | KJG-9088 | truck |
| Carga | Tipo de mercadoria | Eletrônicos | package |
| Financeiro | Valor do frete | R$ 4.500,00 | receipt |
| Tempo | Previsão de chegada | 14/AGO - 16:00 | clock |