Componente de cartão com propriedades personalizadas de CSS

Um componente de cartão é um contêiner independente para conteúdo. Objetivos de projeto: preenchimento consistente usando tokens de espaçamento, cores que aceitam temas usando tokens de referência, dimensionamento responsivo sem JS e suporte a variantes (elevada, contornada, plana) por meio de propriedades personalizadas do CSS.

Use uma única classe .card com propriedades personalizadas do CSS para valores configuráveis. Os elementos internos (cabeçalho, corpo, rodapé) herdam do escopo do cartão. Isso limita a divergência de estilos entre instâncias de cartões em toda a base de código.

Substitua as propriedades personalizadas no nível do cartão com classes de variantes, em vez de escrever conjuntos de regras separados. As classes de variantes precisam apenas redefinir as variáveis alteradas; as propriedades inalteradas herdam automaticamente os valores básicos, sem repetição.

Quando uma classe de tema pai altera --color-surface, todos os cartões dentro desse tema atualizam automaticamente seu plano de fundo. Nenhum código de substituição de tema específico do cartão é necessário — o sistema de tokens de referência cuida disso de forma transparente.

Use clamp() com substituições de propriedades personalizadas para obter um preenchimento fluido: --card-padding: clamp(1rem, 4vw, 2rem). Janelas de visualização maiores recebem um preenchimento mais generoso; janelas menores recebem o mínimo — tudo controlado a partir de uma única definição de token.

Uma grade de cartões que usa o preenchimento automático do CSS Grid com minmax cria uma disposição que se organiza sozinha: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Os cartões ocupam o espaço disponível e quebram automaticamente sem pontos de interrupção de consultas de mídia.

Mantenha proporções consistentes para as imagens dos cartões usando aspect-ratio: 16/9 no contêiner da imagem. As imagens preenchem o contêiner com object-fit: cover, garantindo alturas uniformes para os cartões, independentemente das dimensões da imagem de origem.

Adicione estados para passar o cursor e de foco interno que elevem ligeiramente o cartão: transform: translateY(-2px) e um box-shadow maior. Anime com transition: transform 200ms ease, box-shadow 200ms ease para obter uma resposta de interação suave e eficiente para o compositor.

Torne o cartão inteiro clicável com um link estendido: posicione o cartão de forma relativa e posicione o link principal de forma absoluta com inset: 0. Os leitores de tela leem o texto do link; a sobreposição cobre visualmente o cartão para os usuários de mouse.

Adicione uma variante .card--loading que substitua o conteúdo por um efeito cintilante de esqueleto usando uma animação CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) animada com background-size: 200% e animation: shimmer 1.5s infinite.

No modo escuro, o token --color-surface muda automaticamente de claro para escuro. Se os cartões elevados dependerem de box-shadow para indicar profundidade — algo que desaparece sobre fundos escuros — adicione uma borda sutil ou aumente o contraste da cor da superfície para que a elevação seja percebida no modo escuro.

Como as propriedades personalizadas do CSS permitem criar variantes de cartões sem duplicar todo o conjunto de regras?

Criar um componente de cartão com propriedades personalizadas do CSS resulta em um primitivo de interface flexível, tematizável e capaz de lidar com variantes. As variáveis básicas definem os padrões; as classes de variantes fazem substituições seletivas; as classes de tema fazem substituições globais. Com dimensionamento responsivo, links acessíveis e estados de carregamento, esse padrão se expande de forma organizada pelos sistemas de design.