Infinite Quiz
Design System v2

Infinite Quiz UI Components

Showcase de tous les composants avec le nouveau design system

Sections

Hero Styles

Text Gradients

Primary Gradient

Secondary Gradient

Success Gradient

Fun Gradient

Glow Effects

Animations

float
pulse-soft
bounce-subtle
hover-scale
hover-glow

Glass Effects

.glass

Basic glass

.glass-card

Glass card

Mascot Component

Interactive Mascot

All States & Sizes

States

idle

✨✨⭐⭐

celebrate

sad

??

thinking

Sizes

Quiz Components

Question 12/20
HistoireMedium

Quel événement historique a eu lieu en 1789 en France ?

+50 XP5

TimerBar Component

Time23

Different states:

Time24
Time12
Time5

ScoreDisplay Component

2,450
Score
100
Score

small

1,000
Score

medium

9,999
Score

large

AnswerButton States

Gamification Components

XpBadge Component

+50 XP
+10 XP+50 XP+250 XP
1,500 XP

StreakBadge Component

5

Streak levels:

151015

LevelBadge Component

42
Level
1
25
99

ProgressRing Component

25%
50%
75%
100%

Classement du jour

1A
Alice
58
12,450
Score
2V
Vous
42
11,200
Score
3B
Bob
39
10,800
Score

Buttons

Variants

Colors

Sizes

With Icons & Effects

Badges & Chips

Badges

Default Primary Success Warning Error

Chips

42
999+
New
!

Cards

Card Simple

New

Une carte simple avec header et contenu.

Quiz Card

20 questions
15 minutes

Card Premium

Carte avec dégradé de fond.

Forms

Inputs

Select & Menus

Activer les notifications

Progress & Loading

Progress Bars

Quiz 175%
Quiz 240%
Quiz 3100%

Loading States

Avatars & Users

Avatars

ABIQXL2XL

Avatar Group

+2CBA

User Display

JD

John Doe

Niveau 42 • 1250 points

JS

Jane Smith

Pro Player • Top 10

Alerts & Banners

Information
Ceci est une alerte d'information.
Succès
Votre quiz a été complété avec succès !
Attention
Vous avez 5 minutes restantes pour terminer.
Erreur
Une erreur s'est produite lors de la sauvegarde.

Modals & Overlays

Overlay Components

Data Display

Accordion

Table - Classement

RangJoueurScore
1Alice2500
2Bob2350
3Charlie2100
✨✨⭐⭐

Tous les composants fonctionnent !

Cette page démontre l'utilisation des composants NuxtUI et des composants custom avec le nouveau Design System v2 d'Infinite Quiz.

Documentation NuxtUI Retour à l'accueil