Card

A container with surface, border, and structured slots.

stable

Preview

Card title

A short description of what this card contains.

The body of the card. Cards group related information into a single visual unit.

Code

tsx

import { Button } from "@/components/ui/button";
import {
  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
} from "@/components/ui/card";

export function Example() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>A short description of what this card contains.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-fg-muted">The body of the card.</p>
      </CardContent>
      <CardFooter className="gap-2">
        <Button size="sm">Confirm</Button>
        <Button size="sm" variant="outline">Cancel</Button>
      </CardFooter>
    </Card>
  );
}

Props

Prop	Type	Default	Description
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Sub-components

CardHeader— Title + description region.

CardTitle— Heading element (h3 by default).

CardDescription— Secondary text under the title.

CardContent— Main body.

CardFooter— Actions row at the bottom.

All sub-components forward `ref` and spread their HTML attributes.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/card.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type HTMLAttributes, forwardRef } from "react";

export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("rounded-lg border border-border bg-surface text-fg shadow-sm", className)}
      {...props}
    />
  ),
);
Card.displayName = "Card";

export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
  ),
);
CardHeader.displayName = "CardHeader";

export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
      {...props}
    />
  ),
);
CardTitle.displayName = "CardTitle";

export const CardDescription = forwardRef<
  HTMLParagraphElement,
  HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p ref={ref} className={cn("text-sm text-fg-muted", className)} {...props} />
));
CardDescription.displayName = "CardDescription";

export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
  ),
);
CardContent.displayName = "CardContent";

export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
);
CardFooter.displayName = "CardFooter";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmCard (extends VBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmCard;

PrizmCard()
PrizmCard(String titleText, String bodyText)

Prop	Type	Default	Description
setTitle	`(String) → void`	—	Set the card title text.
setBody	`(String) → void`	—	Set the card body text.
titleLabel	`() → Label`	—	The title Label, for further styling.
bodyLabel	`() → Label`	—	The body Label, for further styling.
addContent	`(Node...) → void`	—	Append arbitrary content below the title and body.

A composite surface over VBox (no stock 1:1 control). Styled by the .prizm-card rules in prizm.css. Mirrors Card + CardTitle + CardDescription in components/ui/card.tsx.