Vocabulary Card Component
The vocabulary card component is used throughout HSKFlashCards to display Chinese vocabulary in deck overviews and paginated listings. Each card shows the Chinese characters, pinyin, English translation, and part of speech.
Interactive Demo
Hover over the part of speech badges to see the full name. Click any card to simulate navigation.
Features
Part of Speech Badges
Each card displays an abbreviated part of speech badge in the top-right corner. Hover over the badge to see the full name.
Responsive Design
The cards adapt to different screen sizes with a responsive grid layout:
- • 1 column on mobile
- • 2 columns on tablets
- • 3 columns on laptops
- • 4 columns on desktop
Hover Effects
Cards have subtle hover animations including elevation changes and color transitions to indicate interactivity.
Accessibility
All interactive elements include proper ARIA labels, keyboard navigation support, and sufficient color contrast for WCAG compliance.
Usage
This component is used in the following pages:
- • Deck Overview Pages - Shows the first 20 vocabulary items as a preview
- • Paginated Vocabulary Lists - Displays 50 vocabulary items per page