Back to Components
Cards
A diverse collection of card styles, from modern flat designs to stunning glassmorphism effects.
Standard Layouts
Simple Card
Basic card with structure
Simple Card
A basic card with structure
This is a simple card with some content. Cards are useful for organizing information.
Card with Footer
Card with actions in footer
Card with Footer
A card with actions in the footer
This card includes a footer with action buttons.
Card with Image
Card with an image header
Card with Image
A card with an image header
This card includes an image at the top.
Interactive Effects
Hover Animations
Cards that respond to user interaction
Hover Scale
Scales on hover
Hover over this card to see it scale up slightly.
Lift Card
Lifts on hover
Hover over this card to see it lift up with a shadow.
Glassmorphism
Cards with translucent glass effects
Glass Card
A card with glassmorphism effect
This card has a glassmorphism effect with backdrop blur.
Advanced Styles
Gradient Background
Cards with beautiful gradient fills
Gradient Card
Gradient background card
This card has a beautiful gradient background.
Interactive Flip Card
Two sides of data in one card
Flip Card Front
Hover to see the back side
Flip Card Back
This is the back side of the card