Ravox KitSuperfícies
Cartão
Agrupa um assunto numa superfície: cabeçalho com título, descrição e uma ação no canto, mídia de ponta a ponta, corpo e rodapé. Pode ser clicável inteiro sem aninhar botões dentro de um link.
Acesso anual
Todos os designs do catálogo e os que saírem nos próximos 12 meses.
Ativo
- Renova em
- 28/09/2027
- Downloads
- 14 de ilimitado
Ajustes
Variante
Densidade
Exemplos
Clicável inteiro, com menu no canto
Aurora
Landing para clínica de estética · editado há 2 h
Compacto, em grade de painel
Pedidos hoje
38
12 aguardando envio
Ticket médio
R$ 142
Últimos 7 dias
Formulário dentro do cartão
Convidar para o time
O convite vale por 7 dias.
Sutil, para avisos dentro da página
Seu design está em revisão
A moderação responde em até 2 dias úteis. Você recebe um e-mail com o resultado.
Instalação
O shadcn cria components/ui/cartao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/cartao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| variante | "padrao" | "contorno" | "sutil" | "padrao" | Superfície com borda, só a borda sobre o fundo da página, ou fundo leve sem borda (Cartao). |
| densidade | "confortavel" | "compacta" | "confortavel" | Respiro de 24px ou 16px. A compacta é para grades de cartões em painel (Cartao). |
| como | "h2" | "h3" | "h4" | "p" | "h3" | Tag do título, para seguir a hierarquia da página (CartaoTitulo). |
| CartaoAcao | ComponentProps<"div"> | — | Vai dentro do CartaoCabecalho e fica no canto direito. Continua clicável num cartão com link. |
| CartaoMidia | ComponentProps<"div"> | — | Imagem ou prévia de ponta a ponta; no começo ou no fim, encosta na borda. |
| divisoria | boolean | false | Fio em cima do rodapé (CartaoRodape). |
| CartaoLink | ComponentProps<"a"> & { asChild } | — | No título, deixa o cartão inteiro clicável: o link se estica por cima do cartão, e o foco pinta a borda dele. |