CARD1
PROGRESS10%
你好
hello
Flashcard Component Demo
Test different states and configurations of the Flashcard component
Interactive Features
- • Click the card or press Space/Enter to reveal translation
- • Use arrow keys (← →) or vim keys (h/l) for navigation
- • Swipe left/right on mobile devices
- • Navigation buttons show deck level when crossing decks
Vocabulary Examples
Simple Characters
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Traditional vs Simplified
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Long Translation
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Supplementary Vocabulary
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Navigation States
First Card
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Last Card
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Cross-Deck Navigation
Tap card to reveal • Swipe or use arrows to navigate
Click card or press Space/Enter/↑/↓/w/s/j/k to reveal translation
Use ←/→ or h/l or a/d to navigate between cards
Swipe left/right on mobile devices
Universal Flashcard System (New!)
These new flashcard designs use OKLCH colors for better perceptual uniformity
Modern Design
Minimal Design
CARD2
PROGRESS20%
谢谢
謝謝
thank you
Split Design
CARD3
PROGRESS30%
再见
再見
goodbye
Material Design
CARD4
PROGRESS40%
朋友
friend (n)