# Card

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

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import { BellRing, Check } from "lucide-react"

import {
  cn,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Switch,
} from "@databricks/appkit-ui/react"

const notifications = [
  {
    title: "Your call has been confirmed.",
    description: "1 hour ago",
  },
  {
    title: "You have a new message!",
    description: "1 hour ago",
  },
  {
    title: "Your subscription is expiring soon!",
    description: "2 hours ago",
  },
]

type CardProps = React.ComponentProps<typeof Card>

export default function CardExample({ className, ...props }: CardProps) {
  return (
    <Card className={cn("w-[380px]", className)} {...props}>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className=" flex items-center space-x-4 rounded-md border p-4">
          <BellRing />
          <div className="flex-1 space-y-1">
            <p className="text-sm font-medium leading-none">
              Push Notifications
            </p>
            <p className="text-sm text-muted-foreground">
              Send notifications to device.
            </p>
          </div>
          <Switch />
        </div>
        <div>
          {notifications.map((notification, index) => (
            <div
              key={index}
              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
            >
              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
              <div className="space-y-1">
                <p className="text-sm font-medium leading-none">
                  {notification.title}
                </p>
                <p className="text-sm text-muted-foreground">
                  {notification.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">
          <Check /> Mark all as read
        </Button>
      </CardFooter>
    </Card>
  )
}

```

## Card[​](#card-1 "Direct link to 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[​](#props "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage "Direct link to Usage")

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

<Card /* props */ />

```

## CardAction[​](#cardaction "Direct link to 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[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

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

<CardAction /* props */ />

```

## CardContent[​](#cardcontent "Direct link to 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[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

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

<CardContent /* props */ />

```

## CardDescription[​](#carddescription "Direct link to 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[​](#props-3 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-3 "Direct link to Usage")

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

<CardDescription /* props */ />

```

## CardFooter[​](#cardfooter "Direct link to 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[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

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

<CardFooter /* props */ />

```

## CardHeader[​](#cardheader "Direct link to 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[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

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

<CardHeader /* props */ />

```

## CardTitle[​](#cardtitle "Direct link to 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[​](#props-6 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-6 "Direct link to Usage")

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

<CardTitle /* props */ />

```