Card
A container component for grouping related content with header, body, and footer sections.
Installation
import { Card, CardHeader, CardBody, CardFooter } from "madagent";Default (Elevated)
Card Title
This is the card body content with some descriptive text.
The refreshed surface leans cleaner and more neutral, with spacing doing more of the structural work.
Variants
Elevated
Cleanest depth for primary content.
Outlined
Crisp edge definition with minimal lift.
Flat
Softer inset surface for nested layouts.
Vertical Image
Product spotlight
Use a top image when the media should set the tone before the copy.
Horizontal Image
Team update
Side media works well when content density matters more than visual drama.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "elevated""outlined""flat" | "elevated" | Visual style variant |
children* | ReactNode | - | Card content |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
عنوان البطاقة
هذا هو المحتوى الأساسي للبطاقة مع نفس البنية المستخدمة في نسخة LTR.
تم عكس التخطيط بصرياً للاتجاه من اليمين إلى اليسار مع الحفاظ على نفس الإيقاع والمسافات والإجراءات السفلية.
Usage
<div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
<Card style={{ maxWidth: 360 }}>
<CardHeader>
<div style={{ display: "grid", gap: 4 }}>
<span style={{ fontSize: 12, opacity: 0.68 }}>تحديث مميز</span>
<h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>عنوان البطاقة</h3>
</div>
</CardHeader>
<CardBody>
<p style={{ fontSize: 14, opacity: 0.78, margin: 0 }}>
هذا هو المحتوى الأساسي للبطاقة مع نفس البنية المستخدمة في نسخة LTR.
</p>
<p style={{ fontSize: 13, opacity: 0.64, marginTop: 12 }}>
تم عكس التخطيط بصرياً للاتجاه من اليمين إلى اليسار مع الحفاظ على نفس الإيقاع والمسافات والإجراءات السفلية.
</p>
</CardBody>
<CardFooter>
<Button size="sm">إجراء</Button>
<Button variant="ghost" size="sm">إغلاق</Button>
</CardFooter>
</Card>
</div>