Pular para o conte√ļdo principal

Card

Vis√£o geral#

O card √© um recipiente (container) flex√≠vel que tem como objetivo agrupar informa√ß√Ķes e a√ß√Ķes sobre um mesmo assunto.

Pode ter diversos tipos de conte√ļdo, como t√≠tulo, textos, bot√Ķes, imagem, entre outros.

Tipos#

O componente prev√™ duas varia√ß√Ķes:

  • Read-only Quando o card √© apenas um ‚Äúagrupador‚ÄĚ das informa√ß√Ķes. Pode conter elementos interativos dentro dele, como por exemplo um link ou bot√£o, mas n√£o h√° nenhum tipo de intera√ß√£o no card propriamente dito.
  • Interactive Quando o card em si √© o elemento interativo, podendo assumir as caracter√≠sticas de:
    • Link: direciona a pessoa para outra p√°gina;
    • Selectable: o card pode ser selecionado, em um conjunto de cards, por exemplo
Tipos de cards lado a lado: read only, interactive e interactive selected

Anatomia#

O card é composto basicamente por border e background. Porém, sua variação interactive possui também shadow e outline.

Anatomia dos dois tipos de cards, com 1 border e 2 background em ambos. Apenas no card interativo, 3 shadow e 4 outline

1. Border

2. Background

3. Shadow

4. Outline (focused)

O card é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

Boas pr√°ticas#

O componente foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG 2.1). Tamb√©m foi estruturado com base em padr√Ķes de usabilidade para contribuir com uma boa experi√™ncia.

Por isso, ao aplicar esse componente, é muito importante que sejam levados em consideração alguns critérios e práticas:

Uso#

  • Mantenha a simplicidade e objetividade nos cards, evitando sobrecarreg√°-los com informa√ß√Ķes. Eles geralmente s√£o uma pequena amostra do conte√ļdo ao qual est√£o relacionados. Podem conter conte√ļdos como imagem de um produto, t√≠tulo, descri√ß√£o, link, bot√Ķes, dentre outros;
  • Forne√ßa contexto sobre o que acontecer√° ao interagir com o card e qual o seu destino. Evite usar express√Ķes gen√©ricas como "Clique aqui".

A√ß√Ķes em cards#

  • Quando a √ļnica a√ß√£o poss√≠vel for abrir ou visualizar mais detalhes do card, n√£o inclua um bot√£o para isso. A a√ß√£o deve acontecer ao clicar em qualquer parte do card. Para esses casos, utilize o card do tipo interactive;
Exemplo de card com ele inteiro pintado, sinalizando que todo ele é um elemento interativoFazer

Ao manter todo o card como clicável, diminuímos a carga de informação, pois muitas vezes o card é usado em conjunto com vários outros com a mesma estrutura.

Exemplo de card com um bot√£o com o r√≥tulo Visualizar‚ÄĚN√£o fazer

N√£o inclua bot√£o quando a √ļnica a√ß√£o do card for abri-lo.

  • Inclua um bot√£o no card apenas quando a a√ß√£o for diferente de apenas visualizar o conte√ļdo ao qual o card est√° relacionado. Para esses casos, opte por usar o card do tipo read-only;
  • Quando houver duas ou mais a√ß√Ķes poss√≠veis no cart√£o, mesmo que uma delas seja abrir o card, opte por disponibilizar as a√ß√Ķes em bot√Ķes.
Card com dois bot√Ķes, sinalizados como as √ļnicas partes interativas daquele conte√ļdoFazer

Usar card do tipo *read-only* em contextos com a√ß√Ķes ajuda a evidenciar as intera√ß√Ķes dos elementos internos do card.

Card com 2 bot√Ķes e toda a base do card sinalizados como partes interativas daquele conte√ļdoN√£o fazer

O uso de interação na base do card e em elementos internos pode gerar confusão e diminui a previsibilidade sobre qual ação acontece ao clicar no card.

  • Quando tiver diferentes elementos interativos dentro do card, mantenha uma sequ√™ncia l√≥gica para navega√ß√£o de um elemento para outro.

Conjunto de cards#

  • Ao utilizar cards em conjunto, mantenha as larguras padronizadas de um card para o outro;
  • Organize-os de forma simples, pois a apresenta√ß√£o dos cards tem impacto no modo em como s√£o compreendidos. Geralmente, o primeiro item fica posicionado no canto superior esquerdo e os demais seguem na sequ√™ncia, da esquerda para a direita, e de cima para baixo.

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas. S√£o elas:

Card (Read-only e interactive)

  • Utiliza medidas relativas, para se adequar √†s prefer√™ncias e necessidades de quem for utilizar o sistema.

Card interative

  • Desenvolvido com uso de controles padr√Ķes HTML, o que permite a identifica√ß√£o na interface por tecnologias assistivas. (WCAG 4.1.2: Name, Role, Value)
  • O foco √© vis√≠vel e possui uma espessura superior a 2 pixels CSS, n√£o ficando escondido por outros elementos da tela. (WCAG 2.4.12: Focus Appearance)
  • Quando selecion√°vel, prev√™ intera√ß√£o por teclado, podendo ser selecionado atrav√©s da tecla space (WCAG 2.4.1 - Keyboard)