Card

Layoutserver safe

Container de superfície composto por partes (header, title, description, action, content, footer).

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Card } from "@trdr/ui/card"

Uso

import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader } from "@trdr/ui/card"

export function Exemplo() {
  return <Card />
}

Props

CardPropsestende React.HTMLAttributes<HTMLDivElement>
CardHeaderPropsestende React.HTMLAttributes<HTMLDivElement>
CardTitlePropsestende React.HTMLAttributes<HTMLDivElement>
CardDescriptionPropsestende React.HTMLAttributes<HTMLDivElement>
CardActionPropsestende React.HTMLAttributes<HTMLDivElement>
CardContentPropsestende React.HTMLAttributes<HTMLDivElement>
CardFooterPropsestende React.HTMLAttributes<HTMLDivElement>

Quando usar

Use o card para agrupar um bloco de conteudo relacionado que precisa se destacar do fundo da pagina: um resumo de posicao, um item de uma grade de opcoes, um bloco de configuracao. Ele e uma composicao por partes, entao voce monta so o que precisar: um card pode ter so header e conteudo, sem footer nem action.

Quando nao usar

Nao use card so para adicionar uma borda visual sem motivo de agrupamento: se o conteudo ja esta claramente separado por layout (grid, espacamento), o card extra so adiciona ruido. Nao use o CardHeader como cabecalho de pagina: ele e dimensionado para o contexto de um card, nao para hierarquia de titulo de tela.

Anatomia

  • Card (data-slot="card"): a raiz, com borda, fundo e cantos arredondados.
  • CardHeader (data-slot="card-header"): area superior, em grid. Quando um CardAction esta presente como irmao de CardTitle/CardDescription, o header detecta isso sozinho e empurra a acao para o canto superior direito.
  • CardTitle (data-slot="card-title"): titulo do card.
  • CardDescription (data-slot="card-description"): texto de apoio, tom secundario.
  • CardAction (data-slot="card-action"): area de acao no canto do header (por exemplo um botao de menu).
  • CardContent (data-slot="card-content"): corpo principal do card.
  • CardFooter (data-slot="card-footer"): area inferior, tipicamente com um botao ou metadado. Adicione a classe border-t no consumo para ganhar um respiro extra no topo.

Nenhuma parte e obrigatoria alem da raiz: use header sem footer, conteudo sem header, o que o layout pedir.

Migracao do componente legado

O Card do Hub antigo (src/components/ui/Card.tsx) era um componente fechado: recebia icon, title, description, headerBadges, footerLeft e footerBadges como props, e sempre virava um link inteiro clicavel (href obrigatorio). No TRDR UI isso deixou de existir como props e virou composicao:

  • o antigo title vira <CardTitle>
  • o antigo description vira <CardDescription>
  • o antigo footerLeft (o codigo do Figma ID) vira qualquer conteudo dentro de <CardFooter>, por exemplo um <code>
  • os antigos headerBadges/footerBadges viram badges normais colocados dentro de CardHeader/CardFooter
  • o comportamento de link obrigatorio saiu daqui: se o card inteiro precisa navegar, envolva o <Card> (ou seu conteudo) num link por fora, o componente nao assume mais isso sozinho

Essa e uma quebra de compatibilidade deliberada: a API fechada nao dava para reaproveitar em casos onde o card nao e um link, ou onde a ordem/presenca das partes muda por contexto.

Acessibilidade

Card e suas partes sao <div> sem papel semantico proprio: a acessibilidade do conteudo depende do que voce coloca dentro (um <h3> de verdade se o titulo for hierarquia de pagina, um <a> se o card inteiro for navegavel). Quando o card inteiro e clicavel, garanta que o alvo de toque e o foco cubram a area inteira do card, nao so o texto do titulo.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="card"][data-slot="card-action"][data-slot="card-content"][data-slot="card-description"][data-slot="card-footer"][data-slot="card-header"][data-slot="card-title"]
6 tokens usados
bg-cardborder-border-subtletext-b3text-card-foregroundtext-h6text-muted-foreground