gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/card.md

- Home
- Components
- Card

# Card

Displays a card with header, content, and footer.

## Props

This component group provides styled containers. All parts accept standard div props.

- Card: root container with size variants (sm, md, lg, xl) for padding
- CardHeader: header row with optional actions, supports size variants for gap spacing
- CardTitle: title text
- CardDescription: subdued description text
- CardAction: right-aligned action area in header
- CardContent: main content area
- CardFooter: footer area (flex container)

## Types

```
// Card component with size variants
interface CardProps extends ComponentProps<"div"> {
  size?: "sm" | "md" | "lg" | "xl";
}

// CardHeader also supports size variants for gap spacing
interface CardHeaderProps extends ComponentProps<"div"> {
  size?: "sm" | "md" | "lg" | "xl";
}

// All other Card components extend ComponentProps<"div">
interface CardTitleProps extends ComponentProps<"div"> {}
interface CardDescriptionProps extends ComponentProps<"div"> {}
interface CardActionProps extends ComponentProps<"div"> {}
interface CardContentProps extends ComponentProps<"div"> {}
interface CardFooterProps extends ComponentProps<"div"> {}
```

```
<Card className="w-[300px]">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardAction>
      <Button variant="link">action</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <div className="flex flex-col my-4">
      <div>CardContent...</div>
      <div>CardContent...</div>
      <div>CardContent...</div>
      <div>CardContent...</div>
      <div>CardContent...</div>
    </div>
  </CardContent>
  <CardFooter className="flex-col gap-2">
  <Button className="w-full">Footer</Button>
  </CardFooter>
</Card>
```

## Sizes

The Card component supports different padding sizes, and CardHeader adjusts gap spacing accordingly:

```
// Small card with reduced padding and gap spacing
  <Card size="sm" className="w-50">
    <CardHeader size="sm">
      <CardTitle>Small Card</CardTitle>
      <CardAction>
        <Settings className="size-4" />
      </CardAction>
    </CardHeader>
    <CardContent className="text-uk-sm">
      Compact content with smaller padding and gap.
    </CardContent>
  </Card>

// Large card with increased padding and gap spacing (default)
  <Card size="lg" className="w-50">
    <CardHeader size="lg">
      <CardTitle>Large Card</CardTitle>
      <CardAction>
        <Settings className="size-4" />
      </CardAction>
    </CardHeader>
    <CardContent className="text-uk-md">
      More spacious content with larger padding and gap.
    </CardContent>
  </Card>
```

## Login Form Example

```
import { Button } from "@vuer-ai/vuer-uikit"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@vuer-ai/vuer-uikit"
import { Input, Label } from "@vuer-ai/vuer-uikit"

<Card className="w-80">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardAction>
      <Button variant="link">Sign Up</Button>
    </CardAction>
  </CardHeader>
  <CardContent className="flex flex-col gap-lg pb-lg">
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
    <form>
      <div className="flex flex-col gap-6">
        <div className="grid gap-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            type="email"
            placeholder="m@example.com"
            required
          />
        </div>
        <div className="grid gap-2">
          <div className="flex items-center">
            <Label htmlFor="password">Password</Label>
            <a
              href="#"
              className="ml-auto inline-block text-uk-xs underline-offset-4 hover:underline"
            >
              Forgot your password?
            </a>
          </div>
          <Input id="password" type="password" required />
        </div>
      </div>
    </form>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button type="submit" className="w-full">
      Login
    </Button>
    <Button variant="outline" className="w-full">
      Login with Google
    </Button>
  </CardFooter>
</Card>
```

## Examples with Icons and Buttons

```
import { Settings, User, Bell, Plus, ChevronRight } from 'lucide-react';

<Card>
  <CardHeader>
    <div className="flex items-center gap-2">
      <User className="size-5 text-text-secondary" />
      <CardTitle>User Profile</CardTitle>
    </div>
    <CardAction>
      <Button variant="ghost" size="sm">
        <Settings className="size-4" />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <CardDescription className="py-lg">
      Manage your account settings and preferences
    </CardDescription>
  </CardContent>
  <CardFooter>
    <Button variant="secondary" className="flex-1">
      <ChevronRight className="size-4 ml-auto" />
      View Details
    </Button>
  </CardFooter>
</Card>

<Card size="sm">
  <CardHeader>
    <div className="flex items-center gap-2">
      <Bell className="size-4 text-text-secondary" />
      <CardTitle>Notifications</CardTitle>
    </div>
  </CardHeader>
  <CardContent>
    <CardDescription className="py-lg">3 new updates available</CardDescription>
  </CardContent>
  <CardFooter>
    <Button size="sm" className="w-full">
      <Plus className="size-4 mr-2" />
      View All
    </Button>
  </CardFooter>
</Card>
```