Cards
Content containers. Cards in the SkillSprout system use heavy 24px borders (`rounded-[24px]`), dark backgrounds (`#28265E`), and thick strokes (`border-doozy-border`).
Basic Content Card
Hello, Companion!
This is a standard card component. Notice the heavy rounding and the subtle border that separates it from the background. We avoid harsh drop shadows in dark mode, preferring thick borders instead.
Interactive Cards (Hover)
Hover Me
When hovering, the card floats up gently (`hover:-translate-y-2`) and emits a soft colored glow via shadows. The border can also shift to a brighter brand color to indicate interactivity.
Top Border Cards (Status / Grade)
By adding border-t-4 and an inline borderTopColor, we can create a clean, rounded colored lip at the top of the card. This is excellent for indicating different categories, grades, or statuses without coloring the entire card background.