Card

Copy<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader>
      <CardTitle>Login to your account</CardTitle>
      <CardDescription>
        Enter your email below to login to your account
      </CardDescription>
      <CardAction>
        <Button variant="link">
          Sign Up
        </Button>
      </CardAction>
    </CardHeader>
    <CardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col space-y-1.5">
            <Label for="email">Email</Label>
            <Input id="email" type="email" placeholder="m@example.com" />
          </div>
          <div class="flex flex-col space-y-1.5">
            <div class="flex items-center">
              <Label for="password">Password</Label>
              <a
                href="#"
                class="ml-auto inline-block text-sm underline"
              >
                Forgot your password?
              </a>
            </div>
            <Input id="password" type="password" />
          </div>
        </div>
      </form>
    </CardContent>
    <CardFooter class="flex flex-col gap-2">
      <Button class="w-full">
        Login
      </Button>
      <Button variant="outline" class="w-full">
        Login with Google
      </Button>
    </CardFooter>
  </Card>
</template>

Copy<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    <Card variant="default">
      <CardHeader>
        <CardTitle>Default</CardTitle>
        <CardDescription>Standard card with border and shadow</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">The default card style with a subtle shadow.</p>
      </CardContent>
    </Card>

    <Card variant="plain">
      <CardHeader>
        <CardTitle>Plain</CardTitle>
        <CardDescription>No border or shadow</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A minimal card without visual boundaries.</p>
      </CardContent>
    </Card>

    <Card variant="boxed">
      <CardHeader>
        <CardTitle>Boxed</CardTitle>
        <CardDescription>Muted background</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A card with a muted background color.</p>
      </CardContent>
    </Card>

    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Elevated</CardTitle>
        <CardDescription>Larger shadow for emphasis</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A card that appears to float above the surface.</p>
      </CardContent>
    </Card>

    <Card variant="inverted">
      <CardHeader>
        <CardTitle>Inverted</CardTitle>
        <CardDescription>Dark background</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A high-contrast card with inverted colors.</p>
      </CardContent>
    </Card>

    <Card variant="primary">
      <CardHeader>
        <CardTitle>Primary</CardTitle>
        <CardDescription>Primary color background</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A card using the primary theme color.</p>
      </CardContent>
    </Card>

    <Card variant="secondary">
      <CardHeader>
        <CardTitle>Secondary</CardTitle>
        <CardDescription>Secondary color background</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">A card using the secondary theme color.</p>
      </CardContent>
    </Card>
  </div>
</template>

Copy<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardImage,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card class="w-full max-w-sm overflow-hidden">
    <CardImage>
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Placeholder"
        class="aspect-video w-full object-cover"
      >
    </CardImage>
    <CardHeader>
      <CardTitle>Card with Image</CardTitle>
      <CardDescription>Use CardImage for media content</CardDescription>
    </CardHeader>
    <CardContent>
      <p class="text-sm text-muted-foreground">
        The CardImage component provides proper spacing and rounded corners for images at the top of a card.
      </p>
    </CardContent>
  </Card>
</template>