Card
OrganismRaised / flat / outline varyantlı içerik konteyneri. title + subtitle + headerRight + footer slotları desteklenir.
User profile
Manage your account details
Card body content goes here.
<Card
title="User profile"
subtitle="Manage your account details"
>
<p>Card body content.</p>
</Card>User profile
Manage your account details
Active
Card body content goes here.
<Card title="User profile" subtitle="Manage your account" headerRight={<Badge variant="success">Active</Badge>}>
<p>Card body content goes here.</p>
</Card>Confirm deletion
This action is irreversible.
<Card title="Confirm deletion" footer={<><Button variant="outline" size="sm">Cancel</Button><Button variant="danger" size="sm">Delete</Button></>}>
<p>This action is irreversible.</p>
</Card>Flat card
No shadow, uses page background color.
<Card variant="flat" title="Flat card">
<p>No shadow, uses page background color.</p>
</Card>Outline card
Transparent background, border only.
<Card variant="outline" title="Outline card">
<p>Transparent background, border only.</p>
</Card>Hoverable only
Hover for shadow
Not clickable, just visually responsive.
<Card title="Clickable" onClick={() => navigate('/detail')}>...</Card>
<Card title="Hoverable" hoverable>...</Card><Card loading />