Componentes/Card

Card

Card de conteúdo — container com borda, padding e hover. Usado como base para cards de navegação e informação no Design Hub.

Outros

Figma: —

Preview

paletteTokens

Cores, espaçamentos e tipografia.

widgetsComponentes

Props, dimensões e tokens.

auto_awesomeGerar Prompt

Pronto para Claude Code.

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Card com footer (variante componente) — Design System TRDR (Figma: 2316:2462) -->
<a href="/destino" class="card">

  <!-- Container 1: conteúdo principal -->
  <div class="card-container1 card-has-footer">
    <div class="card-header">
      <!-- Ícone (opcional) -->
      <span class="card-icon material-symbols-outlined">palette</span>
      <!-- Badges do header (opcional) -->
      <div class="card-badges">
        <span class="trdr-badge trdr-badge-neutral">Tokens</span>
      </div>
    </div>
    <!-- H-6: Space Grotesk 500, 26px -->
    <span class="card-title">Design Tokens</span>
    <!-- B-3: Inter 400, 14px, content/tertiary -->
    <p class="card-desc">Cores, espaçamentos e tokens semânticos do design system.</p>
  </div>

  <!-- Container 2: footer (opcional) -->
  <div class="card-footer">
    <code class="card-figma-id">2316:2462</code>
    <div class="card-badges">
      <span class="trdr-badge trdr-badge-success">Implementado</span>
    </div>
  </div>

</a>

Dimensões

Variante	Largura	Altura
Default	`—`	`auto`

Props / Variantes

Prop	Tipo	Valores
`Variant`	enum	`DefaultWith Icon`

Tokens Utilizados

Propriedade	Token	Valor
Background	`surface.tertiary`	`#1A1A1A`
Border	`border.subtle`	`#222222`
Radius	`scale.radius.md`	`12px`
Padding	`scale.spacing.2xl`	`24px`

Anatomia

Container 1 (borda inferior quando há footer):
  [Header: Icon? 44px brand | Badges direita]
  [Title H-6: Space Grotesk 500, 26px, content/secondary]
  [Desc B-3: Inter 400, 14px, content/tertiary]
Container 2 (footer, opcional):
  [Figma ID B-4: Inter 500, 12px, content/tertiary | Badges direita]

Notas

Hover: border-color passa para border.default, background para surface.secondary. Gap entre containers: scale/spacing/md (12px). Container 1 recebe border-bottom + pb:12px quando há footer.