Layouts de Cartão Que Organizam Complexidade em Clareza
Os cartões são os blocos de construção do design web moderno. O Nielsen Norman Group define-os como contentores que agrupam informação relacionada em unidades escaneáveis e flexíveis. Desenhamos sistemas de cartão que ajudam os utilizadores a navegar, comparar e decidir — quer esteja a mostrar 6 serviços ou 6.000 produtos.
VARIANTES DE PADRÃO
8 Padrões de Cartão Que Desenhamos
Cartões de Serviços
Apresente as ofertas da sua empresa numa grelha escaneável. Cada cartão inclui ícone, título, descrição breve e CTA.
Cartões de Produto
A base do e-commerce. Imagem, título, preço, classificação e CTA adicionar ao carrinho. Desenhado para digitalização rápida.
Cartões de Equipa / Pessoas
Apresente a sua equipa com foto, nome, função e biografia opcional ou links sociais.
Cartões de Portfólio / Caso de Estudo
Destaque trabalhos com imagem dominante, título do projeto, nome do cliente e etiqueta de categoria. A imagem faz a maior parte da venda.
Cartões de Preços
Compare níveis lado a lado. Cada cartão inclui nome do plano, preço, lista de funcionalidades e CTA.
Cartões de Testemunho
Exiba citações de clientes com avatar, nome, função, empresa e texto do testemunho.
Cartões de Blog / Artigo
Pré-visualize posts de blog com imagem destacada, título, excerto, autor, data e etiqueta de categoria.
Cartões Bento Grid
Grelha de cartões assimétrica onde os cartões têm tamanhos diferentes — alguns ocupam 2 colunas, alguns são altos, alguns são largos.
ANIMAÇÕES E EFEITOS
Animações de Cartões Que Melhoram, Não Distraem
Revelação Escalonada no Scroll
Os cartões aparecem um por um com um pequeno atraso entre cada um, criando um efeito cascata enquanto o utilizador faz scroll.
Quando usar: Qualquer grelha de cartões onde o conteúdo carrega enquanto o utilizador faz scroll. Cria ritmo e chama atenção.
Elevação e Sombra no Hover
O cartão eleva-se (translateY -4px a -8px) e a sombra aprofunda-se no hover, simulando profundidade física.
Quando usar: Qualquer cartão clicável. A interação de cartão mais comum e esperada.
Zoom da Imagem no Hover
A imagem do cartão amplia ligeiramente (1.05-1.1x) no hover enquanto o contentor corta o overflow.
Quando usar: Cartões de portfólio, cartões de produto, cartões de blog — onde quer que a imagem seja o elemento visual primário.
Revelação de Overlay no Hover
Um overlay semi-transparente desliza no hover, revelando informação adicional escondida no estado padrão.
Quando usar: Grelhas de portfólio onde quer uma grelha visual limpa mas precisa de mostrar detalhes na interação.
Layout Masonry
Layout estilo Pinterest onde cartões de diferentes alturas encaixam sem espaços. Novos cartões carregam dinamicamente.
Quando usar: Galerias de imagens, arquivos de blog, feeds de conteúdo gerado por utilizadores com alturas naturalmente diferentes.
Virar Cartão
O cartão roda 180 graus no hover para revelar uma face traseira com conteúdo diferente.
Quando usar: Cartões de equipa (frente: foto, trás: biografia), cartões de preços (frente: funcionalidades, trás: comparação). Usar com moderação.
MELHORES PRÁTICAS
Regras que Seguimos para Todos os Projetos
EXEMPLOS PREMIADOS
Sites que Definem o Padrão
Linear.app
Cartões de funcionalidades num fundo escuro com bordas gradiente subtis. Minimalista, denso em informação e tecnicamente preciso. Cada cartão comunica uma funcionalidade.
Stripe Dashboard
Layout bento grid com cartões de tamanhos diferentes. Efeitos glassmórficos e animações subtis tornam dados financeiros densos acessíveis.
Airbnb Search Results
Cartões de produto aperfeiçoados. Carrossel de imagens por cartão, overlay de preço, classificação e ícone coração. Mostra exatamente informação suficiente para decidir se clicar.
Notion Template Gallery
Grelha de cartões limpa com alturas consistentes, categorias claras e miniaturas de pré-visualização. O hover revela um CTA "Usar template". Escala perfeitamente.
O NOSSO PROCESSO
Como Construímos
Auditoria de Conteúdo
Inventarie todos os itens que aparecerão como cartões. Defina o modelo de dados: que campos existem e as suas limitações de comprimento de conteúdo.
Design do Sistema de Grelha
Defina contagem de colunas por breakpoint (4 desktop, 2 tablet, 1 mobile). Defina espaçamento, padding e border-radius.
Design do Componente Cartão
Desenhe o cartão no Figma como componente reutilizável com variantes: padrão, hover, ativo, carregamento, estado vazio.
Especificação de Animação
Defina efeitos hover, revelações acionadas por scroll e timing de transições. Mantenha o tempo total de animação abaixo de 500ms.
Desenvolvimento
Construa com CSS Grid ou Flexbox. Arquitetura baseada em componentes. GSAP para animações de scroll, CSS para efeitos hover.
Testes
Teste com dados reais, casos extremos, cross-browser, interação táctil em mobile e auditoria de acessibilidade.
PADRÕES RELACIONADOS
Explorar Mais Padrões de Página
Secções Hero
A secção que introduz o seu conteúdo antes da grelha de cartões.
Saber mais →Tabelas de Preços
Um padrão de cartão especializado para comparar níveis de serviço.
Saber mais →Prova Social
Cartões de testemunho e grelhas de logótipos que constroem confiança.
Saber mais →Blog & Editorial
Cartões de artigos e layouts de descoberta de conteúdo.
Saber mais →FAQ
Perguntas Frequentes
Quando devo usar cartões vs. uma lista ou tabela?+
Os cartões funcionam melhor para navegar coleções diversas (produtos, serviços, portfólio). As listas funcionam melhor para conteúdo classificado ou sequencial. As tabelas funcionam melhor para comparações ricas em dados. O layout deve corresponder à intenção do utilizador.
Quantos cartões devo mostrar por linha?+
3-4 no desktop (1280px+), 2 no tablet (768px), 1 no mobile (375px). Mais de 4 por linha torna os cartões individuais demasiado pequenos para digitalizar.
As imagens dos cartões devem ter a mesma proporção?+
Sim, sempre. Proporções mistas criam alturas de cartão desiguais que quebram a grelha. Use object-fit: cover para cortar imagens consistentemente.
Como lido com cartões com diferentes comprimentos de conteúdo?+
Defina uma altura fixa de cartão por linha. Truncar texto longo com CSS line-clamp. Desenhe para o pior caso e garanta que conteúdo mais curto ainda parece equilibrado.
Pronto para Desenhar Cartões Que Convertem?
Auditaremos o seu layout atual, identificaremos oportunidades para design baseado em cartões e proporemos um sistema que escala.