Pular para o conteúdo
Faculdade PhorteDesign System

Card

Em andamento

A superfície que agrupa um conteúdo, com partes que cuidam do próprio espaço — CardMedia (imagem de ponta a ponta), CardHeader, CardTitle, CardDescription, CardContent e CardFooter — em quatro tratamentos, um deles para o cartão clicável inteiro.

Função
Conteúdo
Também chamado de
cartão, card, bloco, caixa
Mora em
app/components/atoms/Card.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Cartão de curso, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Cartão de curso
  2. Com mídia
  3. Variantes
  4. Clicável

Quando usar

Para agrupar informação sobre uma coisa só — um curso, um post, uma estatística — que se repete numa grade.

Faça

  • Monte com as partes: cada uma já tem o seu preenchimento.
  • Use CardMedia para imagem de ponta a ponta, com a proporção (16/9, 4/3, 1/1 ou livre).
  • Acerte o nível do título com as no CardTitle (h3 por padrão).
  • Para cartão clicável inteiro, variant="interactive" com o CardLink no título (E68): um link só, estendido sobre o cartão.
  • Use as="article" quando o cartão é um item que vale sozinho numa grade (curso, notícia, evento); li dentro de lista.

Evite

  • Somar preenchimento no cartão e nas partes ao mesmo tempo: o espaço dobra.
  • O cartão inteiro como link com outros controles dentro — são interativos aninhados.
  • interactive sem link dentro: o hover promete um clique que não existe.

Quando não usar. Para curso, post ou evento, use a peça pronta (CourseCard, BlogCard, EventCard). Para um número com rótulo, o StatCard. Para separar seções da página, espaço e título (SectionTitle), não caixas.

Nota de uso

O Card é só a superfície; cada parte cuida do próprio espaço (CardHeader, CardContent, CardFooter com p-6). Não some padding no cartão e no conteúdo ao mesmo tempo — era assim que o espaço dobrava. Para imagem de ponta a ponta, use CardMedia. Para cartão clicável inteiro, variant="interactive" com o `CardLink` no título (E68): um link só, estendido sobre o cartão, com o título como nome — nunca o cartão inteiro como link com outros controles dentro. O anel acende só no foco por teclado. as="article" para item de grade. O CardTitle aceita as para acertar o nível do cabeçalho.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Cartão — `--card`, cantos `rounded-xl`, borda e sombra conforme a variante.
  2. Mídia — `CardMedia`: imagem de ponta a ponta na proporção escolhida, fundo `--muted`.
  3. Cabeçalho — `CardHeader`: título (`CardTitle`) e descrição (`CardDescription`), `p-6 pb-0`.
  4. Conteúdo — `CardContent`, `p-6`.
  5. Rodapé — `CardFooter`: preso embaixo (`mt-auto`), com borda em cima.
  6. Link — `CardLink` (E68): o link do título, com `after:absolute after:inset-0` cobrindo o cartão; `novaAba` avisa a outra aba.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Padrãodefault: borda --border e sombra leve.
Elevadoelevated: sombra grande.
Contornooutline: borda --border-interactive, sem sombra.
Interativointeractive: relative; no hover, borda de controle e sombra maior; com o foco por teclado no link de dentro, o anel de foco em volta do cartão (has-focus-visible, E68 — o focus-within acendia também no clique).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Grade de cartões com alturas diferentesO CardFooter fica colado embaixo (mt-auto), alinhando os rodapés.
Foco por teclado no link de dentro (`interactive`)O cartão inteiro ganha o anel de foco; no clique de mouse, não.
Clique em qualquer lugar do cartão clicávelCai no CardLink — conferido no teste da ficha (um clique na descrição chega ao link).

Relacionados