Design Baseado em Cartões

"Consumo em pequenas porções. Encapsulando pedaços discretos de informação em recipientes visuais distintos."

Quando Usar

Use este sub-estilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Encapsulamento: Cada cartão é autossuficiente. Ele tem uma imagem, um título, uma breve descrição e geralmente uma ação (como um botão ou um ícone de 'curtir').
2. Fluxo Responsivo: Cartões se reorganizam facilmente em diferentes tamanhos de tela (de uma grade de 4 colunas no desktop para uma única coluna no mobile).
3. Limites Claros: Cartões devem se destacar visualmente do fundo.

DNA Visual

• Cores: Muito flexível. O fundo deve ser ligeiramente mais escuro ou distinto da cor do cartão. Neutro Sofisticado funciona bem para uma sensação premium.
• Tipografia: Hierarquia clara dentro do cartão (Cabeçalho, Subcabeçalho, Corpo).
• Estilização: border-radius: 8px padrão e uma sombra projetada média.

Implementação Web

• CSS Grid com auto-fit ou um layout Masonry.
• Exemplo de CSS:

body {
  background-color: #f0f2f5; /* Standard app background */
  padding: 40px;
}

.card-grid {
  display: grid;
  /* Auto-responsive magic */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden; /* Keep images inside the rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.card-content {
  padding: 20px;
  flex-grow: 1; /* Pushes footer to the bottom */
}

.card-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

Implementação de Aplicativo

SwiftUI

struct ContentCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            // Image Area
            Rectangle()
                .fill(Color.gray.opacity(0.2))
                .frame(height: 160)
            
            // Content Area
            VStack(alignment: .leading, spacing: 8) {
                Text("Card Title")
                    .font(.headline)
                Text("A brief description of the content inside this discrete card container.")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .lineLimit(2)
            }
            .padding(16)
        }
        .background(Color.white)
        .cornerRadius(12)
        // Clean, subtle drop shadow
        .shadow(color: Color.black.opacity(0.08), radius: 12, x: 0, y: 4)
    }
}

// In your view:
// LazyVGrid(columns: [GridItem(.adaptive(minimum: 160), spacing: 16)]) { ... }

• VStack dentro de um fundo com .cornerRadius e .shadow é o padrão.
• Use LazyVGrid com .adaptive(minimum: 160) para criar automaticamente uma grade de cartões com várias colunas que flui perfeitamente no iPad ou iPhone.

Flutter

class ContentCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4, // Lida com a sombra nativamente
      shadowColor: Colors.black.withOpacity(0.4),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      clipBehavior: Clip.antiAlias, // Crítico: impede que imagens ultrapassem os cantos
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // Área da Imagem
          Container(
            height: 160,
            color: Colors.grey[300],
            width: double.infinity,
          ),
          // Área de Conteúdo
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text('Título do Cartão', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
                SizedBox(height: 8),
                Text(
                  'Uma breve descrição do conteúdo dentro deste recipiente de cartão discreto.',
                  style: TextStyle(color: Colors.black54),
                  maxLines: 2,

…