# Card

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Card class="w-full max-w-sm"> <CardMedia class="m-1"> <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" /> </CardMedia> <CardHeader> <div class="flex items-center gap-2 justify-between"> <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2"> <Avatar> <AvatarImage> <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="grdient avatar" /> </AvatarImage> <AvatarFallback>AW</AvatarFallback> </Avatar> </div> <Date date="2025-08-24T12:00:00Z" class="text-sm text-muted-foreground" /> </div> </CardHeader> <CardContent class="space-y-4"> <CardTitle>Strong Foundations, Built to Scale</CardTitle> <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription> <Button variant="outline" as="a" href="#">Read more</Button> </CardContent> <CardFooter> <p class="text-sm text-muted-foreground">Categories</p> <div class="flex items-center gap-2"> <Badge variant="secondary">Marketing</Badge> <Badge variant="secondary">UI Design</Badge> </div> </CardFooter> </Card>
</div>

```astro
---
---

<Card class="w-full max-w-sm">
  <CardMedia class="m-1">
    <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" />
  </CardMedia>
  <CardHeader>
    <div class="flex items-center gap-2 justify-between">
      <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
        <Avatar>
          <AvatarImage>
            <img src="https://gradient.bejamas.com/presets/bejamas/marine.png" alt="grdient avatar" />
          </AvatarImage>
          <AvatarFallback>AW</AvatarFallback>
        </Avatar>
      </div>
      <Date date="2025-08-24T12:00:00Z" class="text-sm text-muted-foreground" />
    </div>
  </CardHeader>
  <CardContent class="space-y-4">
    <CardTitle>Strong Foundations, Built to Scale</CardTitle>
    <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>
    <Button variant="outline" as="a" href="#">Read more</Button>
  </CardContent>
  <CardFooter>
    <p class="text-sm text-muted-foreground">Categories</p>
    <div class="flex items-center gap-2">
      <Badge variant="secondary">Marketing</Badge>
      <Badge variant="secondary">UI Design</Badge>
    </div>
  </CardFooter>
</Card>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add card
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add card
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add card
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add card
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    Card content goes here.
  </CardContent>
  <CardFooter>
    <button>OK</button>
  </CardFooter>
</Card>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>variant</code> | `CardVariant` | `"default"` |
| <code>class</code> | `string` | `""` |