# Card

Container for grouping related content with header, body, and footer sections

## Example

## Card

Container for grouping related content with header, body, and footer sections

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { Card } from '@databricks/appkit-ui';

```

## CardAction

Action buttons or controls positioned in the card header

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardAction } from '@databricks/appkit-ui';

```

## CardContent

Main content area of the card

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardContent } from '@databricks/appkit-ui';

```

## CardDescription

Descriptive text providing context for the card

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardDescription } from '@databricks/appkit-ui';

```

## CardFooter

Footer section for additional actions or information

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardFooter } from '@databricks/appkit-ui';

```

## CardHeader

Header section containing title, description, and actions

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardHeader } from '@databricks/appkit-ui';

```

## CardTitle

Title heading for the card

**Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { CardTitle } from '@databricks/appkit-ui';

```