User guide
A card stands out by its background, radius, padding and above all its shadow. Layered shadows (two stacked shadows) deliver a premium look.
- Modern: thin border + soft shadow.
- Premium: deep double shadow.
- SaaS: light background, crisp shadow and generous radius.
FAQ
Why stack two shadows?
A close crisp shadow plus a distant diffuse one mimics real light and adds more believable depth than a single shadow.
How do I make the card clickable?
Add a transition and a :hover effect (negative translateY + stronger shadow) for visual feedback.