Card with header and footer

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

<template>
  <Card class="w-full max-w-xs">
    <CardHeader class="border-b">
      <CardTitle>Header with Border</CardTitle>
    </CardHeader>
    <CardContent>
      <p>
        The footer has a border-t class applied, creating a visual separation
        between the content and footer sections.
      </p>
    </CardContent>
    <CardFooter class="border-t">
      <Button variant="outline" class="w-full">
        Action
      </Button>
    </CardFooter>
  </Card>
</template>