v1.0
đź“– Index de Navigation
Dividers de Base Variantes d'Épaisseur Variantes de Couleurs Variantes de Style Variantes de Largeur Avec Espacement Dividers avec Texte Dividers Verticaux Dividers Spéciaux Notes d'Utilisation

UI Kit - Système de Dividers Travelski

Dividers de Base

Divider standard (1px)

Contenu au-dessus

Contenu en-dessous

<!-- Divider standard --> <div class="divider"></div>

Variantes d'Épaisseur

Divider Large (2px)

Contenu au-dessus

Contenu en-dessous

<!-- Divider Ă©pais --> <div class="divider-large"></div>
Divider XL (4px)

Contenu au-dessus

Contenu en-dessous

<!-- Divider très épais --> <div class="divider-xl"></div>

Variantes de Couleurs

Divider Gris (défaut)
<!-- Divider gris standard --> <div class="divider gray"></div>
Divider Bleu Primaire
<!-- Divider bleu primaire --> <div class="divider primary"></div>
Divider Orange Accent
<!-- Divider orange accent --> <div class="divider accent"></div>
Divider Vert
<!-- Divider vert --> <div class="divider green"></div>
Divider Gris Foncé
<!-- Divider gris foncé --> <div class="divider dark-gray"></div>

Variantes de Style

Divider en Pointillés
<!-- Divider en pointillés --> <div class="divider--dotted"></div>
Divider en Tirets
<!-- Divider en tirets --> <div class="divider--dashed"></div>
Divider avec Ombre
<!-- Divider avec ombre --> <div class="divider divider--shadow"></div>
Divider avec Gradient
<!-- Divider avec gradient --> <div class="divider divider--gradient"></div>

Variantes de Largeur

Divider Small (25%)
<!-- Divider petit centré --> <div class="divider divider--small"></div>
Divider Centered (50%)
<!-- Divider centré --> <div class="divider divider--centered"></div>
Divider Medium (75%)
<!-- Divider medium centré --> <div class="divider divider--medium"></div>

Dividers avec Espacement

Divider avec margin 10px (comme dans avant_reservation.html)

Contenu au-dessus

Contenu en-dessous

<!-- Divider avec espacement utilisé dans les templates --> <div class="divider margin-both-10 gray"></div>
Divider Large Gris (comme dans avant_reservation.html)

Section au-dessus

Section en-dessous

<!-- Divider large utilisé pour séparer des sections --> <div class="divider-large gray"></div>
Divider avec margin 20px

Contenu au-dessus

Contenu en-dessous

<!-- Divider avec plus d'espacement --> <div class="divider margin-both-20 gray"></div>
Divider avec margin 30px

Contenu au-dessus

Contenu en-dessous

<!-- Divider avec beaucoup d'espacement --> <div class="divider margin-both-30 primary"></div>

Dividers avec Texte

Divider avec Texte
ou
<!-- Divider avec texte centré --> <div class="divider-text"> <span>ou</span> </div>
Divider avec Texte - Couleur Primaire
Section suivante
<!-- Divider avec texte et couleur primaire --> <div class="divider-text primary"> <span>Section suivante</span> </div>
Divider avec Texte - Couleur Accent
Étape 2
<!-- Divider avec texte et couleur accent --> <div class="divider-text accent"> <span>Étape 2</span> </div>

Dividers Verticaux

Divider Vertical Standard
Élément 1
Élément 2
Élément 3
<!-- Divider vertical dans une flexbox --> <div style="display: flex; align-items: center; gap: 20px;"> <span>Élément 1</span> <div class="divider-vertical"></div> <span>Élément 2</span> </div>
Divider Vertical avec Hauteur Fixe
Nav 1
Nav 2
Nav 3
<!-- Divider vertical avec hauteur fixe --> <div class="divider-vertical divider-vertical--medium"></div>

Dividers Spéciaux

Divider Animé
<!-- Divider avec animation --> <div class="divider primary divider--animated"></div>
Divider avec Gradient Primaire
<!-- Divider avec gradient primaire --> <div class="divider divider--gradient-primary"></div>
Divider avec Gradient Accent
<!-- Divider avec gradient accent --> <div class="divider divider--gradient-accent"></div>

Notes d'Utilisation

📱 Responsive

Les dividers s'adaptent automatiquement aux Ă©crans :

  • Mobile (< 768px) : Dividers plus fins (large → standard, xl → large)
  • Desktop : Épaisseurs standards
  • Les dividers avec texte ajustent automatiquement leur espacement

âś… Bonnes Pratiques

  • Utilisez .divider pour sĂ©parer du contenu dans une mĂŞme section
  • Utilisez .divider-large pour sĂ©parer des sections importantes
  • Utilisez .divider-xl pour sĂ©parer des grandes sections de page
  • Combinez avec les classes de margin : margin-both-10, margin-both-20
  • Utilisez .gray pour la plupart des cas (couleur neutre)
  • Utilisez .primary ou .accent pour attirer l'attention
  • Utilisez .divider-text pour crĂ©er des sĂ©parations avec label
  • Utilisez .divider-vertical dans les barres de navigation

🚫 À Éviter

  • Ne pas abuser des dividers colorĂ©s (primary, accent) - rĂ©servez-les aux moments importants
  • Ne pas utiliser trop de dividers consĂ©cutifs sans contenu entre eux
  • Ne pas mĂ©langer les styles (pointillĂ©s, tirets) sur la mĂŞme page
  • Ne pas utiliser .divider-xl pour sĂ©parer du contenu mineur
  • Ne pas oublier les classes de margin pour l'espacement

đź“ť Utilisations Courantes

Dans les Templates :

/* SĂ©paration dans une carte d'information */
<div class="divider margin-both-10 gray"></div>

/* SĂ©paration entre sections principales */
<div class="divider-large gray"></div>

Cas d'Usage :

  • Entre des Ă©lĂ©ments de formulaire : divider margin-both-10
  • SĂ©paration de sections : divider-large gray
  • Navigation : divider-vertical
  • Étapes de processus : divider-text primary