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

# CardHeader

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

> The leading card header grid. It creates title and description rows and switches to a two-column layout when [CardAction.root](/v3/reference/theming/keys/CardAction.md#theme-key-CardAction-root) is present.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CardHeader.md#theme-key-CardHeader-root) | 2 classes | The leading card header grid. It creates title and description rows and switches to a two-column layout when [CardAction.root](/v3/reference/theming/keys/CardAction.md#theme-key-CardAction-root) is present. |

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

## root

> The leading card header grid. It creates title and description rows and switches to a two-column layout when [CardAction.root](/v3/reference/theming/keys/CardAction.md#theme-key-CardAction-root) is present.

Default classes:

```text
@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6
has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 [.border-b-hairline]:pb-6
```

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