Skip to main content

Card

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

Example

card
Loading preview…

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 */ />