Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Card

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

## Example​

    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​

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

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <Card /* props */ />

## CardAction​

Action buttons or controls positioned in the card header

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardAction /* props */ />

## CardContent​

Main content area of the card

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardContent /* props */ />

## CardDescription​

Descriptive text providing context for the card

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardDescription /* props */ />

## CardFooter​

Footer section for additional actions or information

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardFooter /* props */ />

## CardHeader​

Header section containing title, description, and actions

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardHeader /* props */ />

## CardTitle​

Title heading for the card

Source: `packages/appkit-ui/src/react/ui/card.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CardTitle /* props */ />