Card

Composable content container with semantic sections

Default

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@tryvienna/ui'

<Card className="w-96">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description with supporting text.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">Card content goes here.</p>
  </CardContent>
</Card>

Examples

Default

Default

<Card className="w-96">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description with supporting text.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">Card content goes here.</p>
  </CardContent>
</Card>

With Action

With Action

<Card className="w-96">
  <CardHeader>
    <CardTitle>Settings</CardTitle>
    <CardDescription>Manage your account preferences.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">
        Edit
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">Your settings content here.</p>
  </CardContent>
</Card>

With Form

With Form

<Card className="w-96">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy a new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="grid gap-4">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="My project" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="framework">Framework</Label>
        <Input id="framework" placeholder="Next.js" />
      </div>
    </div>
  </CardContent>
  <CardFooter className="justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

With Footer

With Footer

<Card className="w-96">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm">Check your inbox for updates.</p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Mark all as read</Button>
  </CardFooter>
</Card>

API Reference

Card

Also accepts all props from div.

CardHeader

Also accepts all props from div.

CardTitle

Also accepts all props from div.

CardDescription

Also accepts all props from div.

CardAction

Also accepts all props from div.

CardContent

Also accepts all props from div.

CardFooter

Also accepts all props from div.

Data Attributes

Component	data-slot
Card	"card"
CardHeader	"card-header"
CardTitle	"card-title"
CardDescription	"card-description"
CardAction	"card-action"
CardContent	"card-content"
CardFooter	"card-footer"