Card Patterns Test

Base Card Pattern

Card Title

This is a base card pattern with depth-m shadow. Hover to see lift effect and depth-l shadow.

Interactive Card

Hover over this card to see the Electric Lime border and elevation effect.

✓ depth-m shadow by default

✓ Hover: translateY(-4px) + depth-l shadow

✓ Border changes to Electric Lime on hover

Category Cards - All 5 Categories

AI - Purple (#9945FF)

AI Project Card

Purple accent border on the left. Hover to see lift effect.

Machine Learning

4px solid purple border distinguishes AI category.

Code - Cyan (#00CCFF)

Code Project Card

Cyan accent border on the left. Hover to see lift effect.

Software Development

4px solid cyan border distinguishes code category.

Hardware - Orange (#FF6600)

Hardware Project Card

Orange accent border on the left. Hover to see lift effect.

Electronics

4px solid orange border distinguishes hardware category.

Art - Red (#FF4444)

Art Project Card

Red accent border on the left. Hover to see lift effect.

Creative Work

4px solid red border distinguishes art category.

Design - Pink (#FFB3D9)

Design Project Card

Pink accent border on the left. Hover to see lift effect.

UI/UX Design

4px solid pink border distinguishes design category.

All Card Types Together

Base Card

Electric Lime border on hover

AI Card

Purple accent border

Code Card

Cyan accent border

Hardware Card

Orange accent border

Art Card

Red accent border

Design Card

Pink accent border

✓ Task 12.4 & 12.5: Card Testing

Test Instructions:

  • Hover over cards → Should lift 4px and show depth-l shadow
  • Verify all 5 category colors have correct accent borders
  • Check responsive layout on mobile (cards stack vertically)
  • Check responsive layout on tablet (2-column grid)
  • Check responsive layout on desktop (maintains grid)
  • Verify smooth transitions (300ms with Apple easing)

Category Colors to Verify:

AI Purple
Code Cyan
Hardware Orange
Art Red
Design Pink

Legacy Glass Card (Backwards Compatibility)

Glass Card

Legacy glass-card class still works with backdrop blur effect.