TaskBuild .card with @scope (.card) for nested rules. .card has padding var(--space-md), bg var(--surface), border 1px solid var(--border), border-radius var(--radius-lg), transition. @scope (.card) { h3 has margin 0 0 var(--space-sm), color var(--text); p has color var(--text-muted), margin 0; .image has aspect-ratio 16/9, width: calc(100% + var(--space-md) * 2), margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md), border-radius: var(--radius-lg) var(--radius-lg) 0 0, object-fit: cover. } .card.featured has border-color var(--primary), box-shadow 0 0 0 3px primary/0.1. .card:has(.image) padding-top: 0. .card:hover transform translateY(-4px), box-shadow var(--shadow-md). Add 3 cards: default, featured (with .featured class), with-image (containing <div class='image'>placeholder).
Capstone 3: Card component (default, featured, with image)
200 XP14 min
Theory
A reusable card primitive
3 variants in one component:
- Default — padding + bg + border + radius.
- Featured — adds a primary-colored border + glow.
- With image — has a top image that bleeds into the border-radius (so the image corners match).
All variants share the same hover state (lift + bigger shadow). Image variant detected via :has(.card__image).
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 15 lessons in each track are free. No card needed for those.