UI Kit - Composant Routes Transport
Route Transport Basique
Route avec icône d'itinéraire
9h30 :
London - King Cross
17h30 :
Station La Plagne 1800
<!-- Route transport avec heures en gras -->
<div class="transport-route">
<div class="route-details">
<div class="route-timeline">
<img src="../assets/icons/services/itineraire.svg" alt="Itinéraire"
width="6" height="49" class="route-icon">
</div>
<div class="route-info">
<div class="route-item">
<span class="route-time">9h30 :</span>
<span class="route-location">London - King Cross</span>
</div>
<div class="route-item">
<span class="route-time">17h30 :</span>
<span class="route-location">Station La Plagne 1800</span>
</div>
</div>
</div>
</div>
Variantes par Type de Transport
Transport en Train 🚆
9h15 :
Paris Gare de Lyon
16h30 :
Bourg-Saint-Maurice
<!-- Design spécial train avec gradient vert -->
<div class="transport-route transport-route--train">
<!-- Contenu identique -->
</div>
Transport en Avion ✈️
8h00 :
London Heathrow
18h45 :
Les Menuires
<!-- Design spécial avion avec gradient bleu et ombre -->
<div class="transport-route transport-route--plane">
<!-- Contenu identique -->
</div>
Transport en Bus/Navette 🚌
14h00 :
Aéroport Geneva
16h30 :
Val Thorens Centre
<!-- Design spécial bus avec gradient orange -->
<div class="transport-route transport-route--bus">
<!-- Contenu identique -->
</div>
Transport en Voiture 🚗
6h30 :
Départ Lyon
13h15 :
Arrivée La Plagne
<!-- Design spécial voiture avec gradient violet -->
<div class="transport-route transport-route--car">
<!-- Contenu identique -->
</div>
Transfert Multimodal 🔄
7h00 :
Avion + Train + Navette
19h30 :
Résidence Les Alpages
<!-- Design spécial transfert avec bordure pointillée -->
<div class="transport-route transport-route--transfer">
<!-- Contenu identique -->
</div>
Variantes de Tailles
Route Compacte
10h15 :
Paris Gare de Lyon
16h45 :
Bourg-Saint-Maurice
<!-- Version compacte avec moins de padding -->
<div class="transport-route transport-route--compact">
<!-- Contenu identique -->
</div>
Route Large
8h00 :
Aéroport Charles de Gaulle
15h30 :
Résidence Les Alpages
<!-- Version large avec plus d'espace -->
<div class="transport-route transport-route--large">
<!-- Contenu identique -->
</div>
Exemples d'Usage
Transport en Train
7h15 :
Départ Bruxelles Midi
18h20 :
Arrivée Val Thorens
<!-- Exemple pour transport ferroviaire -->
<div class="transport-route">
<!-- Structure complète -->
</div>
Transport en Avion + Navette
6h30 :
Décollage Londres Heathrow
19h45 :
Arrivée Les Menuires
<!-- Transport multimodal -->
<div class="transport-route">
<!-- Même structure pour différents types de transport -->
</div>
Notes d'Utilisation
🎯 Structure du Composant
- .transport-route : Container principal avec padding et arrière-plan
- .route-details : Layout flex pour organiser icône et informations
- .route-timeline : Container pour l'icône d'itinéraire (à gauche)
- .route-info : Container pour les informations de trajet (à droite)
- .route-item : Ligne d'information (heure + lieu)
- .route-time : Heure en gras (font-weight: 700)
- .route-location : Nom du lieu en texte normal
✅ Bonnes Pratiques
- Utilisez l'icône
itineraire.svgpour la timeline visuelle - Respectez le format d'heure avec ":" (ex: "9h30 :")
- Gardez les noms de lieux concis mais descriptifs
- Choisissez la variante transport appropriée :
--train: Transport ferroviaire (vert)--plane: Transport aérien (bleu avec ombre)--bus: Bus/navette (orange)--car: Transport automobile (violet)--transfer: Multimodal (gris, bordure pointillée)- Utilisez
transport-route--compactdans les espaces restreints - Utilisez
transport-route--largepour les sections importantes - Ajoutez toujours l'attribut
altà l'icône - Maintenez la largeur maximale à 400px pour la lisibilité
📱 Responsive
Le composant s'adapte automatiquement aux différentes tailles d'écran :
- Mobile : Texte légèrement réduit, gaps optimisés
- Tablet/Desktop : Taille standard, espacement confortable
- Flexibilité : Le texte se redimensionne automatiquement
- Icône : Taille fixe pour maintenir l'alignement