# Card

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](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Card } from '@rivocode/ui'
```

## Exemplos

### Completo

```tsx
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@rivocode/ui'

export function Full() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>Resumo do mês</CardTitle>
        <CardDescription>Agosto de 2026</CardDescription>
      </CardHeader>
      <CardContent>
        Doze notas processadas, três pendentes de aprovação e nenhuma vencida.
      </CardContent>
      <CardFooter>
        <Button size="sm">Ver detalhes</Button>
        <Button size="sm" variant="ghost">Exportar</Button>
      </CardFooter>
    </Card>
  )
}
```

### Elevações

```tsx
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@rivocode/ui'

export function Elevations() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Plano</CardTitle>
          <CardDescription>Sobre o fundo da página</CardDescription>
        </CardHeader>
        <CardContent>A superficie padrão, para conteudo em lista.</CardContent>
      </Card>
      <Card elevation="raised">
        <CardHeader>
          <CardTitle>Levantado</CardTitle>
          <CardDescription>Com sombra</CardDescription>
        </CardHeader>
        <CardContent>Para o que precisa saltar do resto da tela.</CardContent>
      </Card>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `elevation` | `"flat" \| "raised" \| null` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### CardContent

O 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.

### CardDescription

A 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.

### CardFooter

O 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`.

### CardHeader

O 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.

### CardTitle

O 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.

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [DescriptionList](/componentes/description-list.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)