Skip to main content
Card component preview (light)
  • Location: sabo/src/components/ui/card.tsx

​
When to use

  • Group related content and actions with a clear container.
  • Use headers/footers for titles and actions; keep content focused.

​
Usage

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

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Plan</CardTitle>
        <CardDescription>Monthly billing</CardDescription>
        <CardAction><Button size="sm">Change</Button></CardAction>
      </CardHeader>
      <CardContent>Body content goes here.</CardContent>
      <CardFooter><Button variant="outline">Cancel</Button></CardFooter>
    </Card>
  );
}

​
Key parts

​
CardHeader
Title/description area. Use CardAction for right‑side actions.
​
CardContent
Main body region for text or components.
​
CardFooter
Actions or secondary info.

​
Styling tip

  • Keep vertical rhythm consistent (py-6 default). Adjust with className.
  • Avoid over‑nesting; Cards should be simple.

​
Accessibility

  • Provide clear heading text (CardTitle) for screen reader context.