---
title: "Card"
description: "Card surface with header / content / footer slots."
section: "Libraries"
group: "UI components"
order: 504
---

## Usage

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@aeontel/ui";

<Card>
  <CardHeader>
    <CardTitle>Billing</CardTitle>
    <CardDescription>Manage your plan and invoices.</CardDescription>
  </CardHeader>
  <CardContent>Body content here.</CardContent>
  <CardFooter>
    <Button>Upgrade</Button>
  </CardFooter>
</Card>;
```

## Exports

### `Card`

Card surface container.

```ts
Card(props: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>): JSX.Element
```

**Props**

| Prop       | Type                                        | Default     | Description |
| ---------- | ------------------------------------------- | ----------- | ----------- |
| `variant?` | `"outline" \| "solid" \| null \| undefined` | `"solid"`   |             |
| `size?`    | `"default" \| "sm" \| null \| undefined`    | `"default"` |             |

### `CardHeader`

Top section of a card (title + description + action).

```ts
CardHeader(props: React.ComponentProps<"div">): JSX.Element
```

### `CardTitle`

Card title text.

```ts
CardTitle(props: React.ComponentProps<"div">): JSX.Element
```

### `CardDescription`

Subtle description line under the card title.

```ts
CardDescription(props: React.ComponentProps<"div">): JSX.Element
```

### `CardAction`

Action slot (usually a button) aligned to the card header.

```ts
CardAction(props: React.ComponentProps<"div">): JSX.Element
```

### `CardContent`

Main body of the card.

```ts
CardContent(props: React.ComponentProps<"div">): JSX.Element
```

### `CardFooter`

Footer section of the card, typically with action buttons.

```ts
CardFooter(props: React.ComponentProps<"div">): JSX.Element
```