Três variações de card. Escolha pelo contexto: .card-elegant para feature/dashboard, .content-card para grades de conteúdo (política, termos), StatCard para estatísticas em destaque.
Card elegante — .card-elegant
Busca inteligente
Full-text via Elasticsearch com fallback automático para MySQL quando o serviço está indisponível.
<div class="card-elegant">
<div class="card-elegant-header">
<div class="card-icon"><i class="bi bi-search"></i></div>
<h3>Busca inteligente</h3>
</div>
<p>Full-text via Elasticsearch com fallback automático para MySQL quando o serviço está indisponível.</p>
</div>Card de conteúdo — .content-card
Uso dos dados
Dados pessoais de pesquisadores passam pelo LgpdComplianceService antes de qualquer exportação.
<div class="content-card">
<div class="content-card-header">
<div class="content-card-icon"><i class="bi bi-shield-check"></i></div>
<div class="content-card-title">Uso dos dados</div>
</div>
<p class="content-card-body">Dados pessoais de pesquisadores passam pelo LgpdComplianceService antes de qualquer exportação.</p>
</div>Stat card moderno — .stat-card-modern
1.204
Produções indexadas
<div class="stat-card-modern">
<div class="stat-number">1.204</div>
<div class="stat-label">Produções indexadas</div>
</div>Stat card colorido — componente StatCard (PHP)
<?php (new StatCard([
'value' => 312,
'label' => 'Pesquisadores ativos',
'icon' => 'users',
'colors' => ['#1a56db', '#1e429f'],
'link' => '/pesquisadores.php',
]))->render(); ?>
Regra: nenhum card novo deve ter
border-left colorido ou faixa lateral — removido de toda a base (pedido explícito). Hover-lift (translateY) só em cards clicáveis/interativos, nunca em cards de texto estático como os da página de Política de Privacidade.