Cards
Flexible card containers with titles, subtitles, shadows, and hover effects
Basic Cards
Simple cards with titles, subtitles, and body content:
Simple Card
A basic card with just a title and body text.
Card with Subtitle
Supporting text
Cards can have subtitles for additional context and description.
Bordered Card
This card has a visible border for definition.
Shadow Variants
Cards with different shadow depths for visual hierarchy:
Small Shadow
Subtle shadow for minimal elevation.
Default Shadow
Standard shadow for cards.
Medium Shadow
Slightly more pronounced elevation.
Large Shadow
High elevation for prominent cards.
Interactive Cards
Cards with hover effects and click interactions:
Hoverable Card
This card scales up slightly when you hover over it. Try it!
Hover + Border
Combines hover effect with a visible border.
Clickable Style
Click to learn more
This card is styled to look clickable with hover and shadow effects.
Cards with Actions
Cards containing buttons and interactive elements:
Project Update
Last modified 2 hours ago
The project is progressing well. All milestones are on track for the upcoming deadline.
Notification Settings
Configure how you receive updates and alerts from the system.