Card
StableSuperfí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 cardPreview
Default
primitives/card
Ingerido de shadcn/ui, normalizado sobre a Foundation e publicado pelo registry de consumo.
With Action
primitives/tooltip
O conteúdo é sempre redundante em relação ao gatilho: um dispositivo de toque não tem hover.
Compact
primitives/switch
Aplica no instante em que se move.
primitives/skeleton
Placeholder com a forma do que vem.
primitives/separator
Estrutura ou ar, e a diferença importa.
With Dividers
Definition of Done
- 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
With Media
Prévia do item
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
Ingerido de shadcn/ui, normalizado sobre a Foundation e publicado pelo registry de consumo.
With Action
primitives/tooltip
O conteúdo é sempre redundante em relação ao gatilho: um dispositivo de toque não tem hover.
Compact
primitives/switch
Aplica no instante em que se move.
primitives/skeleton
Placeholder com a forma do que vem.
primitives/separator
Estrutura ou ar, e a diferença importa.
With Dividers
Definition of Done
- 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
With Media
Prévia do item
O `alt` está vazio de propósito: a figura é decorativa e o título ao lado já diz o que ela mostra.
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- layout
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / card
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
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.
Dependências
- Pacotes
- Nenhuma
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda