Sistema de UI de Cartões

O que Sistema de UI de Cartões faz?

Propósito

O Sistema de UI de Cartões fornece uma metodologia para projetar e estruturar cartões—os blocos de construção modulares usados para agrupar informações e ações relacionadas. Cartões são os blocos de construção fundamentais de interfaces focadas em descoberta, permitindo que os usuários escaneiem e comparem vários itens distintos (produtos, artigos, perfis) dentro de um grid ou lista unificada. Uma abordagem sistemática para cartões garante que o conteúdo seja escaneável, visualmente coeso e se adapte graciosamente a diferentes contextos de layout (grids, carrosséis, pilhas), mantendo acessibilidade e intenção clara.

Casos de Uso

• Projetar grids de produtos para páginas de listagem de e-commerce (PLPs).
• Criar prévias de artigos ou postagens de blog para hubs de conteúdo.
• Criar seções de "Recursos" ou "Serviços" em uma landing page.
• Organizar widgets de dashboard, destaques de recursos ou resumos de dados.
• Implementar seções de "Conteúdo Relacionado" na parte inferior das páginas.
• Definir um componente "Resultado" para visualizações de busca ou filtro.

Quando NÃO Usar

• Tabelas de Dados Densas: Quando os usuários precisam comparar atributos específicos em muitas linhas de dados granulares simultaneamente; use tabelas-de-dados-responsivas (embora cartões possam ser uma alternativa responsiva).
• Conteúdo Narrativo Único / Fluxos de Texto Simples: Quando o conteúdo segue uma história linear estrita ou parágrafos padrão onde um invólucro de cartão adicionaria ruído visual desnecessário ou interferiria no ritmo de leitura.
• UI de Ação Única Minimalista: Como uma barra de busca de campo único ou um formulário de login simples, onde um invólucro de cartão adicionaria ruído visual desnecessário.

Entradas

1. Anatomia do Conteúdo: Uma lista de elementos obrigatórios (ex.: Imagem, Título, Categoria, Preço, Descrição, CTA).
2. Intenção de Interação: O cartão inteiro é clicável, ou existem alvos de ação específicos?
3. Contexto Pai: Onde o cartão viverá? (ex.: grid de 3 colunas, barra lateral, scroller horizontal?)
4. Variação de Conteúdo: Qual é a quantidade mínima e máxima de texto esperada para títulos e descrições?
5. Sistemas Existentes: Espaçamento fluido, escalas tipográficas e paletas de cores do sistema de design pai.

Saídas

1. Especificação da Anatomia do Cartão: Regiões definidas (Cabeçalho, Mídia, Corpo, Rodapé) e seu espaçamento interno.
2. Blueprint do Cartão: Uma definição estrutural do layout interno e camadas do cartão.
3. Variantes Responsivas: Regras para como o cartão se adapta (ex.: mudando de vertical para horizontal no celular).
4. Especificação de Interação: Estados definidos (Hover, Foco, Ativo) e definições de área clicável.
5. Mapa de Acessibilidade: Diretrizes sobre hierarquia de títulos e padrões de interação por teclado.

Fluxo de Trabalho

1. Aplique a "Regra dos Três Pontos" e Defina a Anatomia

Cada cartão deve ter três pontos claros de hierarquia para garantir escaneabilidade:

1. A Âncora (Visual): Uma imagem ou ícone de alta qualidade que fornece reconhecimento imediato. Defina a proporção para imagens (ex.: 16:9, 1:1).
2. O Contexto (Conteúdo): O título e os metadados principais (ex.: Preço, Data, Categoria).
3. O Alvo (Ação): Uma ação primária clara (ex.: "Adicionar ao Carrinho", "Leia Mais").

Mapeie a hierarquia interna completa: Cabeçalho (meta-informações como tags/datas), Área de Mídia, Conteúdo/Corpo (título + descrição) e Rodapé/Ações (CTAs, preço, prova social).

2. Estabeleça o Espaçamento Interno e a Grade Interna

Aplique o sistema-de-espaçamento-fluido ao interior do cartão:

• Padding: O espaço entre a borda do cartão e seu conteúdo (geralmente --space-m).
• Lacunas de Empilhamento: O espaço vertical entre elementos internos (geralmente --space-xs ou --space-s).

Determine como o conteúdo é distribuído dentro do cartão:

• De Cima para Baixo (Padrão): Imagem no topo, conteúdo no meio, ação na parte inferior.
• Lado a Lado (Horizontal): Imagem à esquerda, conteúdo e ação à direita (melhor para listas móveis ou barras laterais).
• Sobreposição: O conteúdo fica sobre a imagem (requer tratamentos de alto contraste para legibilidade).

3. Projete a Hierarquia Visual e Lide com a Variação de Conteúdo

Aplique as alavancas do sistema-de-hierarquia-visual para distinguir o conteúdo:

• Peso: Torne o Título em negrito e maior que a descrição.
• Contraste: Use uma cor suave para metatexto (ex.: "Publicado em 24 de Out").
• Elevação: Use bordas ou sombras sutis para separar o cartão do fundo.

Projete para o cenário de conteúdo "pior caso":

• Truncamento vs. Quebra: Decida se títulos longos devem truncar com reticências ou quebrar em várias linhas.
• Alinhamento: Use margin-top: auto do Flexbox no contêiner de ação para garantir que os botões se alinhem perfeitamente entre cartões de alturas diferentes em um grid.

4. Estabeleça Padrões de Interação

Escolha um padrão funcional para interação:

• A Grande Caixa: O cartão inteiro é um link (requer tratamento cuidadoso de acessibilidade para leitores de tela).
• A Ação Aninhada: Apenas botões específicos ou o título são clicáveis.
• O Híbrido: A superfície do cartão tem um efeito de hover, mas ações específicas realizam tarefas diferentes (ex.: "Adicionar ao Carrinho" vs. "Ver Detalhes").

Use transformações sutis no hover (ex.: leve elevação, mudança de cor da borda) para indicar interatividade.

5. Defina Adaptações Responsivas e Verifique a Acessibilidade

Planeje como o cartão sobrevive em diferentes viewports:

• Vertical para Horizontal: Para dispositivos móveis, um cartão pode mudar de um layout de imagem no topo para um layout de imagem à esquerda para economizar espaço vertical.

Verifique a acessibilidade antes da aprovação:

• Níveis de Título: Garanta que os títulos dos cartões usem níveis de título apropriados (geralmente H3 ou H4) para manter o contorno do documento da página.
• Alvos de Toque: Qualquer elemento interativo dentro do cartão deve atender ao WCAG 2.2 SC 2.5.8 (mínimo de 24x24px, com espaçamento adequado se alvos menores forem inevitáveis); prefira 44x44px onde o espaço permitir.
• Texto Alternativo: Toda imagem âncora deve ter texto alternativo descritivo ou ser marcada como decorativa.
• Navegação por Teclado: Todos os elementos interativos dentro de um cartão devem ser acessíveis via Tab e ter um indicador de foco que não seja cortado ou ocultado por cartões irmãos ou cabeçalhos fixos (WCAG 2.2 SC 2.4.11, Foco Não Obscurecido).

Regras de Decisão

• A "Regra dos Três Pontos": Um cartão raramente deve ter mais de 3 prioridades distintas (ex.: 1. Imagem, 2. Título, 3. Preço). Muitos detalhes o tornam uma "minipágina", não um cartão.
• A Regra da Proporção: Use proporções consistentes para imagens (ex.: 4:3, 16:9 ou 1:1) para evitar layouts "saltitantes" em um grid.
• Pontuação de Proximidade: A lacuna entre o Título e a Descrição deve ser menor que a lacuna entre a Descrição e o CTA.
• A Regra do "Sem Órfão": Se um cartão faz parte de um grid, o grid deve lidar com o espaço restante graciosamente (ex.: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))).
• Alturas Iguais: Em um grid, cartões na mesma linha devem idealmente ter a mesma altura (usando align-items: stretch do Flexbox).
• Ações Primárias vs. Secundárias: Apenas uma ação deve ser visualmente dominante (CTA Primário). Outras ações (ex.: "Salvar na Lista de Desejos") devem ser ícones ou links de baixo contraste.
• Afinidade Interativa: Se um cartão for clicável, ele deve ter um estado de hover visível.

Restrições

• Responsividade: Cartões nunca devem exceder a largura da viewport ou ter uma largura fixa; eles devem abranger colunas em um sistema-de-grid-responsivo e empilhar verticalmente ou mudar para um layout horizontal em telas pequenas.
• Acessibilidade: Deve suportar navegação por teclado (Tab pelos elementos interativos) e manter uma taxa de contraste mínima de 4,5:1 para texto. Se o cartão inteiro for clicável, use o padrão "link esticado" para evitar links redundantes para leitores de tela.
• Desempenho: Evite imagens excessivamente grandes; use srcset para servir assets de tamanho apropriado para o contêiner do cartão.
• Layout: Prefira CSS Grid com auto-fill/auto-fit e lacunas baseadas em clamp() em vez de breakpoints fixos para que os cartões sejam refluídos naturalmente; use consultas de contêiner (@container) quando o layout interno de um cartão precisar se adaptar à sua própria largura, em vez da viewport (ex.: o mesmo cartão em um grid de largura total e uma barra lateral estreita).

Padrões Comuns de Falha

• O Efeito "Escada / Botão Desalinhado": Botões em alturas diferentes devido a comprimentos variados de título, tornando o grid desorganizado.
• Decoração Excessiva: Usar muitas bordas, sombras e gradientes, tornando o conteúdo difícil de ler.
• Baixa Densidade de Informação: Tornar os cartões muito grandes com pouco conteúdo, forçando rolagem desnecessária.
• Sobrecarga de Informação: Tentar encaixar muitos detalhes em um único cartão, quebrando a Regra dos Três Pontos e confundindo o usuário.
• Alvos de Clique Inacessíveis / Invisíveis: Botões ou links pequenos que são difíceis de tocar em dispositivos móveis, ou tornar um cartão com aparência clicável com apenas um ícone minúsculo como gatilho real.
• Falta de Padding: Amontoar texto contra a borda do cartão ou imagem.

Critérios de Validação

• A "Regra dos Três Pontos" está claramente visível (Âncora, Contexto, Alvo).
• O espaçamento interno (padding/lacunas) usa tokens do sistema de espaçamento fluido.
• A tipografia segue a escala e hierarquia estabelecidas do site.
• As ações primárias (botões) estão alinhadas na parte inferior da linha do grid.
• As proporções de imagem são consistentes em todos os cartões do sistema.
• Os estados interativos (Hover/Foco) estão definidos e acessíveis.
• Os cartões em um grid se alinham corretamente e lidam com comprimentos variados de conteúdo graciosamente.
• Os níveis de título seguem uma hierarquia lógica dentro da página.
• Os alvos de toque atendem ao WCAG 2.2 SC 2.5.8 (mínimo de 24x24px).
• Os indicadores de foco nunca são obscurecidos por cartões sobrepostos, imagens ou elementos fixos (WCAG 2.2 SC 2.4.11).