Primitivelayout

Card

Stable

Superfície que agrupa coisas que pertencem juntas, com header, ação no cabeçalho, conteúdo e rodapé. A elevação é declarada uma vez — hairline e passo tonal, sem sombra —, porque um card fica sobre a página em vez de flutuar sobre ela. O título é um div por padrão: o card não sabe em que documento vai cair, e `headingLevel` é como a página pede um heading de verdade.

Instalação

npx up-web-ds add card

Preview

Default

primitives/card

Superfície que agrupa coisas que pertencem juntas.

Ingerido de shadcn/ui, normalizado sobre a Foundation e publicado pelo registry de consumo.

With Action

primitives/tooltip

Hint transitório ancorado a um gatilho.
stable

O conteúdo é sempre redundante em relação ao gatilho: um dispositivo de toque não tem hover.

Compact

primitives/switch

stable

Aplica no instante em que se move.

primitives/skeleton

stable

Placeholder com a forma do que vem.

primitives/separator

stable

Estrutura ou ar, e a diferença importa.

With Dividers

Definition of Done

O que o validador cobra antes de aceitar `stable`.
  • Implementação e metadata completa
  • Examples e testes
  • Registro no catálogo
  • Tokens da Foundation e dark mode
  • Teclado, leitor de tela e reduced motion
DS011

With Media

Prévia do item

A imagem é o primeiro filho, então o card abre mão do padding superior.

O `alt` está vazio de propósito: a figura é decorativa e o título ao lado já diz o que ela mostra.

All states

Default

primitives/card

Superfície que agrupa coisas que pertencem juntas.

Ingerido de shadcn/ui, normalizado sobre a Foundation e publicado pelo registry de consumo.

With Action

primitives/tooltip

Hint transitório ancorado a um gatilho.
stable

O conteúdo é sempre redundante em relação ao gatilho: um dispositivo de toque não tem hover.

Compact

primitives/switch

stable

Aplica no instante em que se move.

primitives/skeleton

stable

Placeholder com a forma do que vem.

primitives/separator

stable

Estrutura ou ar, e a diferença importa.

With Dividers

Definition of Done

O que o validador cobra antes de aceitar `stable`.
  • Implementação e metadata completa
  • Examples e testes
  • Registro no catálogo
  • Tokens da Foundation e dark mode
  • Teclado, leitor de tela e reduced motion
DS011

With Media

Prévia do item

A imagem é o primeiro filho, então o card abre mão do padding superior.

O `alt` está vazio de propósito: a figura é decorativa e o título ao lado já diz o que ela mostra.

Usage

Imports de Card
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
Card
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle headingLevel={3}>primitives/card</CardTitle>
    <CardDescription>
      Superfície que agrupa coisas que pertencem juntas.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className="type-small text-muted-foreground">
      Ingerido de shadcn/ui, normalizado sobre a Foundation e publicado pelo
      registry de consumo.
    </p>
  </CardContent>
  <CardFooter className="gap-2">
    <Button size="sm">Instalar</Button>
    <Button size="sm" variant="ghost">
      Ver metadata
    </Button>
  </CardFooter>
</Card>

Props

Card

Props de Card
PropTypeDefaultDescription
size"default" | "sm"'default'

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

CardHeader

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

CardTitle

Props de CardTitle
PropTypeDefaultDescription
headingLevel2 | 3 | 4 | 5 | 6sem valor padrão

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

CardDescription

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

CardAction

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

CardContent

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

Composition

As três regiões são independentes: um Card pode ter só header e content, e o footer entra quando existe ação.

Composição de Card

Card

  • CardHeader
    • CardTitle
    • CardDescription
    • CardAction
  • CardContent
  • CardFooter

Metadata

Notas de acessibilidade

Não é interativo por si: não entra na sequência de tabulação e não anima, então teclado, alvo de toque e movimento pertencem aos controles que o card contém, e cada um responde por eles. Leitor de tela verificado por teste: o título fica fora do outline por padrão, porque um primitive que fixasse h3 estaria errado toda vez que a página discordasse, e `headingLevel` o transforma num heading real mantendo o tratamento visual — sem isso, uma grade de cards é uma grade que não dá para navegar por cabeçalho. Contraste verificado nos dois temas: a superfície é --card sobre --background, separada por --border, e não por uma sombra que sumiria no tema escuro.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
layout
Status
Stable

Origem e distribuição

Fonte
shadcn registry / card
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/card.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda