PageHeader
- Angular:
mds-page-header - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O SectionHeader é um cabeçalho utilizado para identificar e separar seções de conteúdo em uma página. Ele fornece contexto imediato sobre o grupo de informações que o sucede, utilizando uma combinação de título, descrição opcional e elemento visual (ícone ou avatar). ) )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Hierarquia (Variações de Tamanho): Utilize as variações de escala para refletir a profundidade da arquitetura de informação. Seções mestras usam títulos maiores; subseções, títulos menores.
- Títulos Diretos: Identifique o assunto da seção com brevidade. Use Caixa de Título.
- Exemplo: Dados do Proprietário, Documentação Fiscal.
- Descrições de Apoio: Utilize a descrição para detalhar a finalidade daquela seção ou dar instruções curtas. Use Caixa de Sentença.
- Exemplo: Insira as informações conforme consta no CRLV.
- Elementos Visuais: O uso de ícones ou avatares deve reforçar o tema da seção (ex: ícone de
personpara dados pessoais). - Consistência: Se usar descrição em um SectionHeader de um grupo, tente manter o padrão nos demais da mesma página para evitar desequilíbrio visual.
Exemplos de Escrita
Seção intitulada “Exemplos de Escrita”| Contexto | Título (Principal) | Descrição (Secundário) |
|---|---|---|
| Operacional | Dados do Veículo | Detalhes técnicos e capacidade de carga. |
| Financeiro | Composição de Custos | Valores referentes a fretes e impostos. |
| Segurança | Contatos de Emergência | Números para acionamento de sinistros. |