Vox Mente
Navegação

Componentes

Card

beta

Agrupa conteúdo relacionado numa superfície elevada, com cabeçalho, corpo e rodapé opcionais.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/card

Playground
Turma 7º ano B
32 alunos · trilha de leitura
Última sessão em 28 de agosto. Nenhuma pendência de correção.
<Card>
  <CardHeader>
    <CardTitle>Turma 7º ano B</CardTitle>
    <CardDescription>32 alunos · trilha de leitura</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Card
  └─ CardHeader
    └─ CardTitle
    └─ CardDescription
    └─ CardAction
  └─ CardContent

Uso

Card é uma superfície, não um layout. Ele agrupa conteúdo que pertence junto.
Turma 7º ano B
32 alunos · trilha de leitura
Última sessão em 28 de agosto. Nenhuma pendência de correção.

Ação no cabeçalho

`CardAction` posiciona um controle à direita do título sem quebrar o alinhamento da descrição.
Trilha de leitura
Publicada em 12 de agosto
Ativa
Quatro sessões concluídas de seis. Duas turmas vinculadas.

Rodapé

`CardFooter` ganha fundo e borda próprios, e o Card remove o padding inferior sozinho quando ele existe.
Convidar professor
O convite expira em 7 dias.
Quem receber o convite entra com permissão de leitura nas turmas selecionadas.

Compacto

`size="sm"` reduz o espaçamento interno e o tamanho do título. Use em listas densas e painéis laterais.
Sessões desta semana
12 realizadas · 3 agendadas
Correções pendentes
Nenhuma

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Card

PropTipoPadrão
size"md" | "sm""md"

Também aceita as props de React, incluindo className e os atributos de DOM.

CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css