With the interactive prop, the card scales on hover and active. Use it to make the whole card a link or button.
children?ReactNodeinteractive?booleanfalsevariant?'shadow'|'outline''shadow'width?'full'|'fit''full'| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
interactive?boolean |
false |
variant? | 'shadow'|'outline' | 'shadow' |
width? | 'full'|'fit' | 'full' |
Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>
import { Card } from '@k8ordo/ui';<Card>
<div className="p-6">Card content</div>
</Card><Card width="full">
<div className="p-6">Full width</div>
</Card>
<Card width="fit">
<div className="p-6">Fit content</div>
</Card><Card interactive>
<a className="block p-6" href="https://example.com">
Hover to scale up
</a>
</Card><Card variant="shadow">
<div className="p-6">Shadow</div>
</Card>
<Card variant="outline">
<div className="p-6">Bordered</div>
</Card>