Pular para o conteúdo
Retents Retents Brand

Cards

Glass Card (padrão)

Componente base. Disponível como .glass-card em todos os apps.

Em dark mode, o efeito glass morphism (backdrop-filter) é visível sobre o fundo escuro. Em light mode, o card renderiza como superfície elevada — sem blur, com sombra sutil. Veja Temas para referência.

Glass Card padrão

Conteúdo com fundo translúcido e borda sutil.

Dark mode:

background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
border-radius: 14px;

Light mode:

background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
border-radius: 14px;
<div class="rounded-lg p-6
            bg-white/4 border border-white/12 backdrop-blur-card
            dark:bg-white/4 dark:border-white/12
            bg-white border-black/8 shadow-sm
            dark:[backdrop-filter:blur(12px)]">
  <!-- conteúdo -->
</div>

Feature Card

Para destacar funcionalidades ou benefícios. Geralmente usados em grid de 3 colunas.

Atendimento 24/7

Responde alunos a qualquer hora com a voz da sua academia.

Régua anti-cancelamento

Age antes do aluno cancelar, não depois.

<div class="rounded-lg p-6 flex flex-col gap-4 transition-colors
            bg-white/4 border border-white/12 hover:border-white/25
            dark:bg-white/4 dark:border-white/12 dark:hover:border-white/25
            bg-white border-black/8 hover:border-black/18 shadow-sm">
  <div class="w-10 h-10 rounded-lg bg-brand-500/10 flex items-center justify-center">
    <!-- ícone -->
  </div>
  <h3 class="text-[#0a0a0a] dark:text-white font-bold">Título da feature</h3>
  <p class="text-[rgba(0,0,0,0.65)] dark:text-[rgba(255,255,255,0.65)] text-sm">Descrição em até 2 linhas.</p>
</div>

Post Card (blog)

Para listagens de conteúdo e blog.

<a href="/blog/slug" class="rounded-lg p-6 flex flex-col gap-4 transition-colors group
                            bg-white/4 border border-white/12 hover:border-white/25
                            dark:bg-white/4 dark:border-white/12 dark:hover:border-white/25
                            bg-white border-black/8 hover:border-black/18 shadow-sm">
  <span class="text-xs font-medium text-brand-600 dark:text-brand-400 uppercase tracking-wider">Categoria</span>
  <h2 class="text-[#0a0a0a] dark:text-white font-bold text-xl
             group-hover:text-brand-600 dark:group-hover:text-brand-300 transition-colors">
    Título do post
  </h2>
  <p class="text-[rgba(0,0,0,0.65)] dark:text-[rgba(255,255,255,0.65)] text-sm">Descrição breve.</p>
  <div class="flex items-center gap-3 text-[rgba(0,0,0,0.45)] dark:text-[rgba(255,255,255,0.45)] text-xs">
    <span>Autor</span>
    <span>·</span>
    <time>Data</time>
  </div>
</a>

Regras

  • Padding padrão: p-6 (24px). Cards maiores: p-8
  • Em dark mode, nunca aninhe glass cards — o efeito de blur não funciona sobre outro blur
  • Em light mode, use superfície (bg-white) com shadow-sm — sem backdrop-filter
  • Hover state dark: hover:border-white/25; hover state light: hover:border-black/18
  • Em grids, todos os cards da mesma row devem ter o mesmo height — use flex flex-col e flex-1 para equalizar