Card
Hard-edge cards with solid shadows. Like physical index cards stacked on a desk, each with crisp edges and clear boundaries. Easily customizable with different shadow depths and styles.
Shadow Variations
Override the default shadow to create different visual weights and depths.
shadow-[2px_2px_0_0_#111111]shadow-[4px_4px_0_0_#111111]shadow-[6px_6px_0_0_#111111]Shadow Color Variations
Use colored shadows for accent or categorization.
E-commerce Product Card
-15%
Best SellerBlog Article Cards
Jane Doe
Dec 15, 2024
Dashboard Stats Cards
+20.1% from last month
+180 new this week
+19% from last month
-2% from last month
Progress & Status Cards
24
Tasks Done
8
In Progress
3
Remaining
All tasks completed
Finished on Dec 10, 2024
Pricing Cards
- 5 projects
- Basic analytics
- Community support
- 1GB storage
- Unlimited projects
- Advanced analytics
- Priority support
- 50GB storage
- Custom domains
- Team collaboration
- Everything in Pro
- Dedicated support
- SSO & SAML
- Unlimited storage
- SLA guarantee
- Custom integrations
Event & Course Cards
Dec 20, 2024 ยท 2:00 PM EST
Design System Workshop
Learn to build scalable design systems from scratch with industry experts.
Advanced React Patterns
Master compound components, render props, and hooks.
January 15, 2025
6:00 PM - 9:00 PM
WeWork, Manhattan
Notification Cards
New message from Sarah
Hey! Just wanted to check in on the project status...
2 minutes ago
Deployment successful
Your application has been deployed to production.
10 minutes ago
Storage limit warning
You've used 85% of your storage quota.
1 hour ago
Call to Action Card
Ready to get started?
Join thousands of developers building beautiful interfaces with Hard-Edge Stack.