Box
- Angular:
section.box - CSS/HTML (mds-styles): CSS
- Figma: ❌
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Box é um contêiner básico utilizado para agrupar elementos relacionados, criando blocos lógicos de informação. Ele ajuda a organizar o layout, estabelecendo separação visual e hierarquia entre diferentes seções de uma página.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Títulos de Seção: Utilize títulos curtos e diretos no topo do Box para identificar o grupo de dados. Use Caixa de Título.
- Exemplo: Dados do Veículo, Histórico de Entregas.
- Agrupamento Lógico: Coloque dentro do Box apenas elementos que pertençam ao mesmo contexto. Não misture ações globais com dados específicos de um item.
- Espaçamento (Padding): Mantenha um respiro interno consistente para que os textos e campos de entrada não toquem as bordas, garantindo a legibilidade.
- Vá Direto ao Ponto: O título do Box deve ser autossuficiente.
- Ruim: Veja aqui todas as informações sobre o motorista.
- Melhor: Perfil do Motorista