2
Interaction Models
Use quick hover reveals for light moments, or drive the active face from your own app state.
Vue 3 + Quasar 2
QFlashcard
CSS transition flashcards for Vue and Quasar applications
Create front/back card reveals and compact animated surfaces for learning tools, showcases, and playful UI moments without wiring every transition by hand.
HoverControlledFront / BackTransitionsMedia
Animated SurfacesMotion-first surfaces
Flashcard-style motion for small, expressive interface moments
Use hover-driven or explicitly controlled flashcards to reveal alternate states, supporting media, or compact bits of detail while keeping the component footprint small.
CSS
Transition Surface
Keep the motion layer small and focused instead of introducing a larger animation system.
Slots
Content Freedom
Put text, media, buttons, forms, or Quasar controls on either face of the card.
Included
Card-flip interactions that stay focused on the reveal, not the setup
QFlashcard is intentionally narrow in scope: front and back content, transition-friendly structure, and quick integration into Quasar layouts where a lightweight reveal is enough.
flip
Front and Back Faces
Render paired card states for learning tools, teasers, or compact layered content.
touch_app
Hover or Controlled
Choose between quick hover interaction and explicit state control from your own app logic.
animation
Lightweight Motion
Add movement and reveal behavior without introducing a larger scene or animation system.
perm_media
Media-Friendly
Mix images, copy, icons, and supporting detail into either face of the card surface.
widgets
Small-Surface UX
Use flashcards in dashboards, learning experiences, feature showcases, and compact callouts.
palette
Themeable Presentation
Fit the component into branded Quasar layouts instead of treating it like a one-off animation demo.
Ecosystem
Built in the same docs workflow as the other md-plugins sites
This site runs on Q-Press and the shared md-plugins tooling, so QFlashcard's docs, examples, and navigation fit into the same family as the sibling Quasar UI projects.
Need Help?
Start with the intro, then use the examples as live reference
The docs are structured to move quickly from install and upgrade steps into working examples. If something feels off, GitHub Discussions and the repo issue tracker are the best places to surface it.
Introduction First
Start with the introduction to see when hover-driven cards are enough and when explicitly controlled state is the better fit.
Upgrade Notes
QFlashcard's current docs follow the Vue 3 + Quasar 2 line, so the upgrade guide should be the first stop when migrating older integrations.
Discussions + Issues
Questions, bugs, and API edge cases are easiest to track in the QFlashcard repo and GitHub Discussions.