Cards

Cards são componentes da interface usados para agrupar informações relacionadas dentro de um container/bloco. Os cards funcionam como um contentor para algumas informações curtas e relacionadas. Os cards não possuem uma configuração de estilos para o conteúdo que é apresentado neles.

Boas práticas

Cards geram uma leitura mais lenta do que listas e tabelas. Em listas simples verticais, o posicionamento padronizado e tamanho fixo de linhas é mais previsível e facilita a leitura. Em casos onde é mais provável que o usuário busque por um item específico dentre vários agrupamentos de informações, os cards podem prejudicar leitura. Neste caso, considere utilizar o componente de Tabela.
Cards são uma boa escolha para dashboards que apresentam diferentes tipos de conteúdo na mesma página. Nessas situações, o card ajuda a criar uma diferenciação mais óbvia entre os itens, e ainda pode acomodar uma variedade de elementos.

Tipos de Cards

Leitura	Utilizados para apresentar informações ao usuário. Esses cards podem conter CTA's (call-to-action) como botões e links.
Clicável	Utilizados como itens de navegação, podem redirecionar o usuário para outra página. Neste tipo de card não é recomendado utilizar CTA's.
Selecionável	Funcionam como um Checkbox, onde o card inteiro é um alvo de seleção. Cards de seleção funcionam bem para casos onde é necessário utilizar textos maiores que a recomendação do componente de Checkbox.
Expansível	Cards expansíveis utilizam o comportamento do componente Accordion. O card expansível pode conter CTA's internos, se o CTA possuir sua própria área de clique.