v1.0
đź“– Index de Navigation
Dates Standard Dates Compactes Dates Colorées Variations de Gap Classes CSS Notes d'Utilisation

UI Kit - Composant Dates

Dates Standard

Dates d'arrivée et de départ
Arrivée
sam. 15 janv.
DĂ©part
sam. 22 janv.
<!-- Dates standard avec gap de 16px --> <div class="dates-row gap-16"> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Arrivée</div> <div class="date-value">sam. 15 janv.</div> </div> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Départ</div> <div class="date-value">sam. 22 janv.</div> </div> </div>

Dates Compactes

Version compacte (taille réduite)
Check-in
15/01
Check-out
22/01
<!-- Dates compactes avec modificateur --> <div class="dates-row dates-row--compact gap-12"> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Check-in</div> <div class="date-value">15/01</div> </div> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Check-out</div> <div class="date-value">22/01</div> </div> </div>

Dates avec Couleur Primaire

Couleurs primaires Travelski
Début séjour
15 janvier 2024
Fin séjour
22 janvier 2024
<!-- Dates avec couleur primaire --> <div class="dates-row dates-row--primary gap-16"> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Début séjour</div> <div class="date-value">15 janvier 2024</div> </div> <div class="date-item d-flex flex-column align-start"> <div class="date-label">Fin séjour</div> <div class="date-value">22 janvier 2024</div> </div> </div>

Variations de Gap

Gap 8px (Espacement réduit)
Arrivée
15 janv.
DĂ©part
22 janv.
<!-- Espacement réduit avec gap-8 --> <div class="dates-row gap-8"> <!-- ... contenu ... --> </div>
Gap 24px (Espacement large)
Arrivée
15 janv.
DĂ©part
22 janv.
<!-- Espacement large avec gap-24 --> <div class="dates-row gap-24"> <!-- ... contenu ... --> </div>

Classes CSS Utilisées

Classe Source Description
.dates-row dates.css Conteneur principal des dates
.date-item dates.css Item de date individuel avec flex: 1
.date-label dates.css Label de la date (petite taille, gris)
.date-value dates.css Valeur de la date (taille normale, noir)
.gap-X layout.css Espacement entre les éléments + display: flex
.d-flex layout.css display: flex (déjà inclus dans gap-X)
.flex-column layout.css flex-direction: column
.align-start layout.css align-items: flex-start

Notes d'Utilisation

📱 Responsive

Le composant dates s'adapte automatiquement sur mobile :

  • Mobile (< 480px) : Tailles de police rĂ©duites
  • Desktop : Tailles de police standards

âś… Bonnes Pratiques

  • Utilisez gap-16 pour l'espacement standard
  • Utilisez dates-row--compact pour des espaces restreints
  • Utilisez dates-row--primary pour mettre en avant les dates
  • Les classes gap-* incluent dĂ©jĂ  display: flex
  • Toujours utiliser flex-column et align-start sur date-item

🚫 À Éviter

  • Ne pas utiliser d-flex si vous utilisez dĂ©jĂ  gap-*
  • Ne pas oublier flex-column sur les date-item
  • Ne pas mĂ©langer plusieurs variantes de couleur

đź“ť Variantes Disponibles

  • dates-row--compact : Version plus compacte avec des tailles de police rĂ©duites
  • dates-row--primary : Version avec les couleurs primaires du thème