# Card

A container with header, body and footer slots.

Group: Basics

## Import

```tsx
import { Card } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
<Card.Root maxW="sm">
  <Card.Header>
    <Card.Title>Hello</Card.Title>
    <Card.Description>Card minimalis ala shadcn.</Card.Description>
  </Card.Header>
  <Card.Body>
    <Text fontSize="sm">Konten card ada di sini.</Text>
  </Card.Body>
  <Card.Footer>
    <Button size="sm">Simpan</Button>
    <Button size="sm" variant="outline">Batal</Button>
  </Card.Footer>
</Card.Root>
```

## Variants

Set these as props. Values come from the live theme.

- `variant`: `outline`, `elevated`, `subtle`
- `size`: `sm`, `md`, `lg`