Basic card

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

<template>
  <Card class="w-full max-w-xs">
    <CardHeader>
      <CardTitle>Default Card</CardTitle>
      <CardDescription>
        This card uses the default size variant.
      </CardDescription>
    </CardHeader>
    <CardContent>
      <p>
        The card component supports a size prop that defaults to
        "default" for standard spacing and sizing.
      </p>
    </CardContent>
    <CardFooter>
      <Button variant="outline" class="w-full">
        Action
      </Button>
    </CardFooter>
  </Card>
</template>