> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

> Container for grouping related content.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/card-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=ff9a03bdca93c9c72e2fef045b8437e2" alt="Card component preview (light)" width="240" data-path="images/ui/card-light.png" />
</Frame>

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

```tsx sabo/src/components/ui/card.tsx theme={null}
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

<ParamField path="CardHeader">
  Title/description area. Use <code>CardAction</code> for right‑side actions.
</ParamField>

<ParamField path="CardContent">
  Main body region for text or components.
</ParamField>

<ParamField path="CardFooter">
  Actions or secondary info.
</ParamField>

## Styling tip

* Keep vertical rhythm consistent (<code>py-6</code> default). Adjust with <code>className</code>.
* Avoid over‑nesting; Cards should be simple.

## Accessibility

* Provide clear heading text (<code>CardTitle</code>) for screen reader context.