Card with border separation

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

<template>
  <Card class="w-full max-w-xs gap-0 p-0">
    <CardHeader class="flex items-center justify-between px-4 py-2">
      <CardTitle>Header</CardTitle>
      <CardAction>
        <Button variant="outline" class="w-full">
          Action
        </Button>
      </CardAction>
    </CardHeader>
    <CardContent class="border-y px-4 py-3">
      <p>
        The footer has a border-t class applied, creating a visual separation
        between the content and footer sections.
      </p>
    </CardContent>
    <CardFooter class="border-none px-4 py-3">
      <Button variant="outline" class="w-full">
        Action
      </Button>
    </CardFooter>
  </Card>
</template>