Card

card é um componente extremamente flexível, que pode ser usado para apresentar uma grande variedade de conteúdo de forma destacada.

Quando usar

Pode ser usado para mostrar uma lista de notícias de forma organizada ou um grupo de opções que o usuário pode selecionar, como serviços oferecidos. O card é flexível também no estilo, pode conter ou não imagens, ícones, textos e links.


Anatomia

  • Contêiner: é a área total do card. Essa área deve se destacar do fundo da página através de borda ou de cor que gere contraste.
  • Texto: fornece informação ao usuário. Pode ser uma descrição do que o usuário pode esperar ao clicar o card ou resumo da informação.
  • Link (opcional): caso o card seja informativo, pode existir um link que direciona o usuário para o local onde ele poderá encontrar mais informações sobre o assunto.
  • Imagem (opcional): representação visual do conteúdo. Pode ser ícone, ilustração ou fotografia.

Card

Para usar este componente em seu leiaute, acesse o banco de recursos e veja as versões já disponíveis para aplicação.


Comportamento

  • Interações: o card pode tanto ser totalmente clicável, apenas informativo ou ter um link para mais informações. Nos casos de cards clicáveis ou com link, ao selecionar o card o usuário será direcionado para outra página.