Card Variant System Test

Current Mode: Light

Size & Style Variants

Default Small

Clean minimal design

Variant: default | Size: sm

Elevated Medium

Hover to see lift effect

Variant: elevated | Size: md

Bordered Large

Hover to see border change

Variant: bordered | Size: lg

Gradient Extra Large

Hover to see shimmer effect

Variant: gradient | Size: xl

Interactive Medium

Hover to see scale effect

Variant: interactive | Size: md

Corner Radius Options

Sharp Corners

Radius: none

Subtle Rounded

Radius: sm

Default Rounded

Radius: md

More Rounded

Radius: lg

Very Rounded

Radius: xl

Micro-Interactions

Loading Card
Success Card
Error Card

Animation Demo

Slide-Up Entry

Interactive Card

Fade-In Entry

Gradient Card