Cards de UI (cartões)

Um contêiner que agrupa conteúdo relacionado num bloco escaneável, comum em feeds, dashboards e catálogos.

Hard

O que é

Card de UI é um bloco modular que agrupa conteúdo relacionado, como título, texto, imagem e ação, numa unidade estruturada e fácil de escanear. Inspirado no cartão físico, ele organiza a informação em pedaços que a pessoa processa rápido.

Ele funciona bem justamente porque quebra muita informação em unidades gerenciáveis. Em feed, dashboard ou catálogo, ele dá estrutura e ajuda a leitura, e ainda se adapta bem a tela de qualquer tamanho, empilhando ou se reorganizando conforme o espaço.

Dois cuidados são centrais aqui. O primeiro é a hierarquia dentro do card: título visível, imagem dando contexto e ação se destacando, porque sem isso ele vira bagunça. O segundo é a interação, já que o card costuma ser clicável inteiro, então precisa ficar claro se a pessoa clica no card, no botão dentro dele ou nos dois. Como componente reutilizável, o card escala bem em design system.

Em uma frase

Vamos transformar cada produto num card com imagem, preço e botão pra ficar fácil de escanear.

A pergunta que ele responde

Como organizo um monte de informação em blocos que a pessoa lê de relance?

Quando usar

Pra agrupar conteúdo relacionado em unidades escaneáveis, em feed, dashboard ou catálogo, com hierarquia clara dentro de cada um.

Como não usar

O erro é empilhar conteúdo no card sem hierarquia, ou deixar ambíguo o que é clicável, sem a pessoa saber se aciona o card inteiro ou so o botão.

Na prática

Pense no catálogo em que cada produto vira um card com imagem, preço e botão, tudo num único alvo de toque. A pessoa escaneia a lista inteira sem esforço, porque cada bloco já está organizado pra ser lido de relance.

Não confunda com

Vale separar card de modal, porque eles ocupam lugares diferentes na tela. O card vive na própria tela como parte do layout, enquanto o modal aparece por cima e bloqueia o resto até a pessoa responder. Um convive com o conteúdo ao redor; o outro interrompe e exige uma resposta antes de seguir.

D

Em inglês

UI Cards

Pronúncia

iú-ái cards

Também chamado de

card, cartão, cartão de UI

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre cards como padrão de UI