> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Card
> A composable card component built on the V2 design system.
```tsx theme={null}
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@fanvue/ui";
import type {
CardContentProps,
CardDescriptionProps,
CardFooterProps,
CardHeaderProps,
CardHierarchy,
CardProps,
CardTitleProps,
CardType,
CardVariant,
} from "@fanvue/ui";
```
## Examples
## Primary
```tsx theme={null}
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@fanvue/ui";
Title goes hereCard description text
Content goes here
```
## Interactive
```tsx theme={null}
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@fanvue/ui";
Title goes hereHover to see the interactive treatment
Content goes here
```
## Header Only
```tsx theme={null}
import { Card, CardContent, CardHeader, CardTitle } from "@fanvue/ui";
Title goes here
A bare card shell with no prescribed header structure.
```
## Secondary
```tsx theme={null}
import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from "@fanvue/ui";
Title goes here
Content goes here
```
## Props
## Card
A composable card component built on the V2 design system. Compose it with `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` for structured layouts.
The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and the `type` prop drives the internal spacing (Default / Header Only / Container).
When `true`, the card will take the full width of its container.
Visual hierarchy of the card.
When `true`, applies the hover treatment for clickable cards.
When `true`, removes all internal padding.
Structural type of the card.
Legacy visual style variant.
**Deprecated.** Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.
## CardContent
Flexible content area of a `Card`. Its vertical padding follows the card `type`: `default` pads top and bottom, `header-only` pads only the top, and `container` removes the built-in padding entirely.
Takes no props of its own. Accepts all standard `div` attributes, including `className`.
## CardDescription
Description text rendered below the `CardTitle` inside a `CardHeader`.
Takes no props of its own. Accepts all standard `p` attributes, including `className`.
## CardFooter
Footer section of a `Card`. Renders children in a horizontal row with a gap.
Takes no props of its own. Accepts all standard `div` attributes, including `className`.
## CardHeader
Header section of a `Card`. Renders a flex row with text content on the left and an optional trailing action element (e.g. icon) on the right.
Icon element displayed at the trailing end of the header.
## CardTitle
Title element rendered inside a `CardHeader`. Adapts its type scale to the card `hierarchy`.
Takes no props of its own. Accepts all standard `h1-h6` attributes, including `className`.
## Exported types
Also exported from `@fanvue/ui`: `CardContentProps`, `CardDescriptionProps`, `CardFooterProps`, `CardHeaderProps`, `CardHierarchy`, `CardProps`, `CardTitleProps`, `CardType`, `CardVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)