Components
Usage
Import the Card component from @udixio/ui-react to group related content and actions.
import { Card } from "@udixio/ui-react"<Card>
<div className="p-4 space-y-2">
<h3 className="text-lg font-semibold">Card title</h3>
<p>Card body content goes here.</p>
</div>
</Card>Variants
<div className="flex flex-wrap gap-4 w-full">
<Card className={"flex-1 h-48 min-w-48 flex items-center justify-center"}>
<div className="text-display-small text-center">Outlined (default)</div>
</Card>
<Card className={"flex-1 h-48 min-w-48 flex items-center justify-center"} variant="elevated">
<div className="text-display-small">Elevated</div>
</Card>
<Card className={"flex-1 h-48 min-w-48 flex items-center justify-center"} variant="filled">
<div className="text-display-small">Filled</div>
</Card>
</div>Interactive state
Enable hover and press feedback by setting isInteractive to true. Use it for clickable cards (e.g., navigation tiles).
<Card className={"w-full h-48 flex items-center justify-center"} isInteractive>
<div className={"text-display-small"} >Clickable card</div>
</Card>Composition patterns
Cards are layout containers. Combine simple elements to create common patterns.
Header + body
<Card>
<div className="p-4 space-y-1">
<h3 className="text-base font-semibold">Project Aurora</h3>
<p className="text-sm text-on-surface-variant">Last updated 2 days ago</p>
</div>
</Card>Media + text
<Card>
<img className="w-full h-40 object-cover" src="https://picsum.photos/640/240" alt="Cover" />
<div className="p-4">
<p>Beautiful landscapes collection</p>
</div>
</Card>Actions
<Card>
<div className="p-4 not-prose px-6 space-y-6">
<p class={"not-prose text-headline-small"}>Delete Confirmation</p>
<p>Are you sure you want to delete this item?</p>
<div className="flex gap-6">
<Button disableTextMargins size={"small"} label="Cancel" variant="text" />
<Button size={"small"} label="Delete" variant="filled" />
</div>
</div>
</Card>