Fanvue API Documentation

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

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@fanvue/ui";

<Card hierarchy="primary" type="default" className="max-w-sm">
  <CardHeader>
    <CardTitle>Title goes here</CardTitle>
    <CardDescription>Card description text</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="typography-body-small-14px-regular text-content-tertiary">
      Content goes here
    </p>
  </CardContent>
  <CardFooter>
    <Button variant="secondary" size="40" fullWidth>
      CTA
    </Button>
    <Button variant="primary" size="40" fullWidth>
      CTA
    </Button>
  </CardFooter>
</Card>

Interactive

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@fanvue/ui";

<Card hierarchy="primary" type="header-only" interactive className="max-w-sm">
  <CardHeader>
    <CardTitle>Title goes here</CardTitle>
    <CardDescription>Hover to see the interactive treatment</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="typography-body-small-14px-regular text-content-tertiary">
      Content goes here
    </p>
  </CardContent>
</Card>

Header Only

import { Card, CardContent, CardHeader, CardTitle } from "@fanvue/ui";

<Card hierarchy="primary" type="header-only" className="max-w-sm">
  <CardHeader>
    <CardTitle>Title goes here</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="typography-body-small-14px-regular text-content-tertiary">
      Content goes here
    </p>
  </CardContent>
</Card>

Container

import { Card, CardContent } from "@fanvue/ui";

<Card hierarchy="primary" type="container" className="max-w-sm">
  <CardContent>
    <p className="typography-body-small-14px-regular text-content-primary">
      A bare card shell with no prescribed header structure.
    </p>
  </CardContent>
</Card>

Secondary

import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from "@fanvue/ui";

<Card hierarchy="secondary" type="default" className="max-w-sm">
  <CardHeader>
    <CardTitle>Title goes here</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="typography-body-small-14px-regular text-content-tertiary">
      Content goes here
    </p>
  </CardContent>
  <CardFooter>
    <Button variant="secondary" size="32" fullWidth>
      CTA
    </Button>
    <Button variant="primary" size="32" fullWidth>
      CTA
    </Button>
  </CardFooter>
</Card>

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).

boolean

default:"true"

When true, the card will take the full width of its container.

"primary" | "secondary"

default:"primary"

Visual hierarchy of the card.

boolean

default:"false"

When true, applies the hover treatment for clickable cards.

boolean

default:"false"

When true, removes all internal padding.

"default" | "header-only" | "container"

default:"default"

Structural type of the card.

"filled" | "outlined" | "elevated" | "ghost"

deprecated

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.

ReactNode

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 · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

Card

Examples

Primary

Interactive

Header Only

Container

Secondary

Props

Card

CardContent

CardDescription

CardFooter

CardHeader

CardTitle

Exported types

​Examples

​Primary

​Interactive

​Header Only

​Container

​Secondary

​Props

​Card

​CardContent

​CardDescription

​CardFooter

​CardHeader

​CardTitle

​Exported types

Examples

Primary

Interactive

Header Only

Container

Secondary

Props

Card

CardContent

CardDescription

CardFooter

CardHeader

CardTitle

Exported types