iconiq
—Open GitHub

Card

Motion-smoothed surface for grouped content, metrics, and supporting actions.

Red and purple gradient artwork
?

Design Systems That Age Gracefully
Lasting interfaces come from steady patterns, resilient foundations, and decisions that remain coherent as products grow.
Categories
MarketingUI Design

Installation

npx shadcn@latest add @iconiq/card

Props

Card

4 props

Compound card surface with slot-based sections, optional interactive lift, and layout-aware motion between content states.
childrenReactNode
Required
Compose CardHeader, CardContent, CardFooter, media, or custom blocks inside the shared card shell.
interactiveboolean
Defaultfalse
Enables the restrained hover lift and stronger surface response intended for clickable or focusable cards.
reducedMotionboolean
Forces the calmer motion path immediately while still honoring a user's system-level reduced motion preference.
classNamestring
Merged onto the root card surface for local spacing, border, or layout adjustments without replacing the slot API.

Notes

The root forwards standard div props, so you can attach ids, aria attributes, data attributes, and event handlers directly.
Cards with a direct leading image automatically remove top padding and inherit the root radius on the first and last image edges.
Footer-aware padding is handled by the card itself, so adding CardFooter trims the bottom padding without extra wrapper logic.