---
url: "https://vueda.dev/v3/reference/theming/keys/Card.md"
title: "Card"
---

# Card

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The framed card surface. It owns the card background, border, radius, vertical rhythm, and non-raised shadow contract; padding on the horizontal axis belongs to child slots.

Vue component: [Card](/v3/reference/api/vue/Card.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Card.md#theme-key-Card-root) | 3 classes | The framed card surface. It owns the card background, border, radius, vertical rhythm, and non-raised shadow contract; padding on the horizontal axis belongs to child slots. |

<a id="theme-key-Card-root"></a>

## root

> The framed card surface. It owns the card background, border, radius, vertical rhythm, and non-raised shadow contract; padding on the horizontal axis belongs to child slots.

Default classes:

```text
bg-card text-card-foreground
flex flex-col gap-6
rounded-vueda-card hairline hairline-border py-6
```

Source: `client/lib/theme/vueda-tailwind/shell/Card.theme.js:18`