Cards

Card is the standard surface for grouping related content into a bordered, slightly elevated container. It is a set of composable parts (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) that you assemble to fit the content, so a card can be as simple as a single body or as rich as a titled panel with actions in the footer.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: card.tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
} from "@beacon/design-system";

<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content and body text lives in here.</p>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>;

Parts

Part	Role
Card	Outer container with border, background, rounded corners, and a subtle shadow.
CardHeader	Top region; stacks title and description with consistent spacing.
CardTitle	Prominent heading text for the card.
CardDescription	Muted supporting text under the title.
CardContent	Main body region for the card’s content.
CardFooter	Bottom region, typically holding actions such as buttons.

Every part is a div and forwards all standard div props (including className), so you can extend layout and spacing with utility classes.

When to use

• Grouping a single record’s details (a lien, a work order, a contact) into one bounded surface.
• Building dashboard panels and settings sections that need a clear visual boundary.
• Wrapping form sections where a header, fields, and a submit action belong together.

Do not use Card for compact status labeling; reach for the Status Badge instead.