Card
The primary content container, composed from header, icon, title, action, body and footer slots. Boundaries are hairlines, not shadows.
Recent orders
3
3 awaiting fulfilment
Auto-approve is on
<Card> <CardHeader> <CardIcon><ClipboardList className="size-4" /></CardIcon> <CardTitle>Recent orders</CardTitle> <CardAction><Badge>3</Badge></CardAction> </CardHeader> <CardBody> <Text tone="secondary">3 awaiting fulfilment</Text> </CardBody> <CardFooter> <Text variant="body-sm" tone="tertiary">Auto-approve is on</Text> </CardFooter></Card>