Componentes
Card
Superfície. Quatro materiais: papel guarda dado e decisão, rebaixado abriga prévia, vidro só no que flutua, noite é a superfície da marca.
Exemplos#
paper · e1
Papel
O padrão. Dado, formulário, decisão.
sunken · e0
Rebaixado
Trilho de segmento, área de teste, prévia.
glass · e2
Vidro
Só no que flutua. Tem borda de luz nas quinas.
night · e2
Graffiti
Superfície da marca. Sidebar, cabeçalho do agente, dock.
Materiais · paper · sunken · glass · night
04Cartão interativo
Passe o mouse: o papel fica; a borda de luz acende depois do olhar chegar
Cabeçalho com índice, rótulo, título e descrição. As ações descem no celular em vez de espremer o título.
Cartão interativo · cabeçalho completo · rodapé
Raio concêntrico · 16 − 4 = 12
Importar#
import { Card, CardHeader, CardFooter, SectionTitle, Kicker } from "@hiboupay/react";
import type { CardProps, CardHeaderProps, CardMaterial, CardPadding } from "@hiboupay/react";Quando usar#
Use quando
- Agrupar dado relacionado com título e ações.
- Item clicável em grade (interactive).
- Bloco de métrica, formulário ou prévia.
Não use quando
- Envolver a página inteira.
- Card dentro de card com o mesmo material.
- Vidro sobre dado que precisa de leitura atenta.
Variantes#
paper · e1
O padrão. Dado, formulário, decisão.
sunken · e0
Trilho de segmento, área de teste, prévia.
glass · e2
Só no que flutua. Combine com hb-lens para a borda de luz.
night · e2
Graffiti. Cabeçalho do agente, destaque de marca.
Anatomia#
- 01Contêiner raio 16 com material
- 02CardHeader: índice mono, rótulo (kicker), título Sora, descrição, ações
- 03Corpo livre
- 04CardFooter: divisor e ações à direita
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| material | "paper" | "sunken" | "glass" | "night" | "paper" | Material da superfície. |
| padding | "none" | "sm" | "md" | "lg" | "md" | Cresce com a tela. O raio interno de quem está dentro é 16 − padding. |
| interactive | boolean | false | Acende a borda de luz no hover, sem levantar o cartão. |
| hover | boolean | Obsoleto. Use interactive. | |
| CardHeader.index | string | number | Número vira dois dígitos (1 → 01). | |
| CardHeader.kicker | ReactNode | Rótulo de máquina acima do título. | |
| CardHeader.title | ReactNode | Título em Sora 16. | |
| CardHeader.description | ReactNode | Texto de apoio. | |
| CardHeader.actions | ReactNode | Botões. Quebram para baixo no celular. | |
| CardHeader.divider | boolean | Linha abaixo do cabeçalho. |
Acessibilidade#
Teclado
Leitor de tela
- —CardHeader.title é h3; ajuste a hierarquia da página em volta.
- —Não coloque role=button no Card; use link ou botão dentro.
Boas práticas#
Faça
- Um assunto por cartão.
- Ações no cabeçalho ou no rodapé, não nos dois.
- Raio concêntrico para o que está dentro.
Evite
- Faixa colorida no topo para indicar estado.
- Sombra preta.
- Card com padding lg dentro de card.
Conteúdo#
- —Título diz o assunto, não a ação.
- —Kicker em mono, curto: "paper · e1", "Etapa 2".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Dados
MetricWidget
Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.
Estado
EmptyState
Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.
Superfície
Grid
1 a 6 colunas. Gap da escala (8 · 12 · 16 · 24 · 32) e os cortes da margem (md 768, xl 1280).