Card

Container component with 5 variants: default, bordered, elevated, highlight, and ghost. The building block for content sections.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "poyraz-ui/atoms";

Default

Standard dashed-border card.

Project Alpha

A brutalist design system

Card content goes here.

<Card>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>A brutalist design system</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button size="sm">View Details</Button>
  </CardFooter>
</Card>

Variants

All 4 non-default card variants.

Bordered

High contrast border

Bold slate-900 border for stronger visual presence.

Elevated

Red offset shadow

Brutalist offset shadow with a red box behind.

Highlight

Left red accent

Red left border stripe draws attention to important content.

Ghost

No border

Transparent background with no borders.

<Card variant="bordered">...</Card>
<Card variant="elevated">...</Card>
<Card variant="highlight">...</Card>
<Card variant="ghost">...</Card>