Card

AW

August 24, 2025

Strong Foundations, Built to Scale

Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.

Read more

Categories

Marketing UI Design

---
import { Avatar, AvatarFallback, AvatarImage } from '@bejamas/ui/components/avatar';
import { Badge } from '@bejamas/ui/components/badge';
import { Button } from '@bejamas/ui/components/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle } from '@bejamas/ui/components/card';
import { Date } from '@bejamas/ui/components/date';
import { Separator } from '@bejamas/ui/components/separator';
---

<Card class="w-full max-w-sm">
  <CardMedia class="m-1">
    <img src="https://gradient.bejamas.com/api/gradient.png?funkiness=30&contrast=0&w=748&h=500&seed=bejamas" 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/api/gradient.png?funkiness=90&contrast=0&w=80&h=80&seed=bejamas-avatar" 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>
  <Separator />
  <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>

View CodeHide Code

Installation

bun

bunx bejamas add card

npm

npx bejamas add card

pnpm

pnpm dlx bejamas add card

yarn

yarn dlx bejamas add card

Usage

---
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';
---

<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
variant	CardVariant	"default"
class	string	""