Card header with border

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

<template>
  <Card class="w-full max-w-xs">
    <CardHeader class="border-b">
      <CardTitle>Header with Border</CardTitle>
      <CardDescription>
        This is a card with a header that has a bottom border.
      </CardDescription>
    </CardHeader>
    <CardContent>
      <p>
        The header has a border-b class applied, creating a visual separation
        between the header and content sections.
      </p>
    </CardContent>
  </Card>
</template>