البطاقة حاوية مرنة لتجميع المحتوى ذي الصلة.
Loading demo: card-real-world
npx sdaia-ui@latest add card
1<Card className="w-full max-w-[400px]">2<Card.Content3leadingItem={4<Card.LeadingItem type="featured-icon" featuredIconVariant="outline" />5}6label="Label"7helperText="Helper Text"8showCheckbox={false}9/>10<Card.Footer type="actions">11<Button variant="primary">Action</Button>12<Button variant="neutral">Action</Button>13</Card.Footer>14</Card>
بطاقة منشور اجتماعي مع صورة رمزية ومحتوى وأزرار تفاعل.
Loading demo: card-social-post
يعرض بطاقة متعددة الاستخدامات لتجميع المحتوى ذي الصلة.
Loading demo: card-default
البطاقة designed for rich text and descriptive content.
Loading demo: card-content
بطاقة منتج تحتوي على صورة وعنوان وسعر وزر إجراء.
Loading demo: card-product
item card suited مدمج لـ list-style layouts.
Loading demo: card-item
بطاقة حدث تعرض التاريخ والعنوان والموقع.
Loading demo: card-event
بطاقة منشور اجتماعي مع صورة رمزية ومحتوى وأزرار تفاعل.
Loading demo: card-social-post
بطاقة مهمة لعروض قوائم المهام وإدارة المشاريع.
Loading demo: card-task
البطاقة with a media area that stretches to the full card width.
Loading demo: card-media-stretched
خصائص مكوّن Card.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
direction | 'ltr' | 'rtl' | deprecated | optional |