CardItem
- Angular:
mds-card-item - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O CardItem é um componente interativo utilizado para listar opções de ação, links ou modos de visualização. Ele combina elementos visuais e descritivos para orientar a escolha do usuário, oferecendo um feedback visual claro de que a área é clicável.
Anatomia e Diretrizes de Escrita
Seção intitulada “Anatomia e Diretrizes de Escrita”- Ícone de Contexto (Esquerda): Ajuda no reconhecimento visual da categoria da ação (ex: ícone de
tabelapara Visão Tabela). - Rótulo (Label): O nome da ação ou opção. Use Caixa de Título e negrito.
- Exemplo: Visão em Tabela, Configurações de Pátio.
- Descrição (Description): Texto curto que detalha o que acontecerá ao clicar. Use Caixa de Sentença.
- Exemplo: Exiba seus fretes em formato de lista detalhada ou Ajuste os parâmetros das suas docas.
- Indicador de Navegação (Chevron): Seta à direita (
proximo) que reforça a natureza de “link” do componente. - Interatividade: Todo o corpo do card deve possuir um estado de hover (mudança leve de cor ou elevação) para confirmar que é clicável.