# Card

- Page: <https://kznlabs.github.io/labsUI/components/card>

## Card (`card`, component)

Composable surface: header, title, description, content and footer. Optional glass.

- Install: `npx @kznlabs/labsui add card`
- Docs: <https://kznlabs.github.io/labsUI/components/card>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Card>` (+ <div> props)
  - `glass?: boolean`: Subtle translucency; place over textured/colored backgrounds.
- `<CardHeader>` (+ <div> props)
- `<CardTitle>` (+ <h3> props): Heading level follows the page outline: `as="h2"` directly under the page's h1. Default h3.
  - `as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p"` = `"h3"`: Heading level that fits the page outline; "p" when it is not a heading.
- `<CardDescription>` (+ <p> props)
- `<CardContent>` (+ <div> props)
- `<CardFooter>` (+ <div> props)

### Usage

```tsx
<Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader><CardContent>…</CardContent></Card>
```

### Example: revenue.tsx

```tsx
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { CountTo } from "@/components/ui/count-to";
export function Revenue() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Monthly revenue</CardDescription>
        <CardTitle>
          <CountTo to={48290} prefix="$" />
        </CardTitle>
      </CardHeader>
      <CardFooter>
        <Badge variant="success" shape="pill">
          +12.4%
        </Badge>
      </CardFooter>
    </Card>
  );
}
```