card

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/card/Card.astro directly.
3/**
4 * @component Card
5 * @title Card
6 * @description UI container for grouping content with header, footer, etc.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3884&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Card class="w-full max-w-sm">
12 *   <CardMedia class="m-1">
13 *     <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="Gradient Cover" class="w-full h-full object-cover" width="374" height="250" loading="lazy" />
14 *   </CardMedia>
15 *   <CardHeader>
16 *     <div class="flex items-center gap-2 justify-between">
17 *       <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
18 *         <Avatar>
19 *           <AvatarImage>
20 *             <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="grdient avatar" />
21 *           </AvatarImage>
22 *           <AvatarFallback>AW</AvatarFallback>
23 *         </Avatar>
24 *       </div>
25 *       <Date date="2025-08-24T12:00:00Z" class="text-sm text-muted-foreground" />
26 *     </div>
27 *   </CardHeader>
28 *   <CardContent class="space-y-4">
29 *     <CardTitle>Strong Foundations, Built to Scale</CardTitle>
30 *     <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>
31 *     <Button variant="outline" as="a" href="#">Read more</Button>
32 *   </CardContent>
33 *   <CardFooter>
34 *     <p class="text-sm text-muted-foreground">Categories</p>
35 *     <div class="flex items-center gap-2">
36 *       <Badge variant="secondary">Marketing</Badge>
37 *       <Badge variant="secondary">UI Design</Badge>
38 *     </div>
39 *   </CardFooter>
40 * </Card>
41 *
42 * @usage
43 *
44 * ```astro nocollapse
45 * ---
46 * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';
47 * ---
48 *
49 * <Card>
50 *   <CardHeader>
51 *     <CardTitle>Card Title</CardTitle>
52 *     <CardDescription>Card Description</CardDescription>
53 *   </CardHeader>
54 *   <CardContent>
55 *     Card content goes here.
56 *   </CardContent>
57 *   <CardFooter>
58 *     <button>OK</button>
59 *   </CardFooter>
60 * </Card>
61 * ```
62 */
63 
64import { cva } from "class-variance-authority";
65import { cn } from "@/lib/utils";
66import type { HTMLAttributes } from "astro/types";
67 
68type CardVariant = "default" | "ghost";
69 
70// … truncated