Card
Completo
Resumo do mês
Agosto de 2026
Elevações
Plano
Sobre o fundo da página
Levantado
Com sombra
import { Card } from '@rivocode/ui'Quando usar
Superfície que agrupa conteúdo relacionado.
Compõe com CardHeader, CardTitle, CardDescription, CardContent e
CardFooter. O título sai como <h3>, então respeita a hierarquia da página.
elevation="flat" (padrão) fica sobre o fundo. raised ganha sombra, para o que
precisa saltar. Não empilhe elevacoes: se tudo salta, nada salta.
No React Native
Traduz: o @rivocode/ui-native exporta Card - com CardHeader, CardTitle, CardDescription e CardContent (sem CardFooter). A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
elevation0.4.0 | "flat""raised"null |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
Partes
Card se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
CardContent
/card-content.mdO corpo do cartão.
Tem respiro próprio nas laterais, então não precisa de outro padding por
fora. Vários seguidos empilham sem grudar.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
CardDescription
/card-description.mdA linha de apoio abaixo do título, em texto suave e menor.
Para o que ajuda a decidir se vale ler o cartão, não para o conteúdo dele.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
CardFooter
/card-footer.mdO rodapé do cartão, separado por uma linha.
É onde a ação mora. Alinha em linha com respiro entre os itens; para jogar os
botões à direita, use justify-end na className.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
CardHeader
/card-header.mdO topo do cartão: título, descrição e o que mais identifique o conteúdo.
Empilha em coluna com respiro menor embaixo, para o CardContent continuar a
leitura sem um vão no meio.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
CardTitle
/card-title.mdO nome do cartão, na fonte de display.
Sai como <h3>. Se o cartão viver dentro de uma seção com outro nível de
heading, troque a tag com render em vez de deixar a ordem quebrada.
Sem prop própria: repassa ao elemento de baixo o que você mandar.