v1.0
đź“– Index de Navigation
Cartes Principales Cartes de Document Cartes Image-Contenu Cartes Ligne Simple Tailles de Cartes États des Cartes Layouts des Cartes Groupes de Cartes Carte Météo Notes d'Utilisation

UI Kit - Système de Cartes Travelski

Cartes Principales

Property Card - Carte Propriété avec Image
RĂ©sidence
01/05
<!-- Carte propriété avec carousel --> <div class="card card--property"> <div class="card__image-container"> <img src="image.jpg" class="card__image"> <button class="card__share-button">Partager</button> <div class="card__counter">01/05</div> </div> </div>
Carte Base Standard

Titre de la carte

Description de la carte avec du contenu informatif pour l'utilisateur.

En savoir plus
<!-- Carte de base --> <div class="card"> <h3>Titre</h3> <p class="card__description">Description</p> <a href="#" class="card__link">Lien</a> </div>

Cartes de Document

Document Card - Avec bouton de téléchargement

Facture de la réservation

Disponible

<!-- Carte de document --> <div class="card card--document"> <h2 class="title-xs font-primary weight-bold text-primary tracking-tight">Titre du document</h2> <p class="card__status">Statut</p> <button class="button--download"> <span>Télécharger</span> <img src="download.svg" alt="Télécharger"> </button> </div>

Cartes Image-Contenu

Image Content Card - IcĂ´ne Ă  gauche
Localisation

RĂ©sidence Les Chalets & Balcons

Station de la Norma
73500 Villarodin-Bourget France

<!-- Carte image-contenu de base --> <div class="card card--image-content"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="card__title">Titre</h3> <p class="card__description">Description</p> </div> </div>
Image Content Card - Avec lien d'action
Smile & Pass

Récupérer ses skipass

Récupérez vos skipass directement à la réception du lieu de remise des clés

QR Code Flèche
<!-- Carte image-contenu avec lien --> <div class="card card--image-content"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="card__title">Titre</h3> <p class="card__description">Description</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>
Image Content Card - Sans titre, avec lien
Sport 2000

La boutique Sport 2000 la plus proche se situe à 200 mètres de votre appartement !

Itinéraire Google Flèche
<!-- Carte image-contenu sans titre, avec lien --> <div class="card card--image-content"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <p class="card__description">Description uniquement</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>
Image Content Card - Sans titre, sans lien
Cloud

Informations météo et conditions de neige mises à jour quotidiennement pour votre station.

<!-- Carte image-contenu sans titre, sans lien --> <div class="card card--image-content"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <p class="card__description">Description informative uniquement</p> </div> </div>
Image Content Card - Icône réduite (90%)
WiFi

Accès WiFi gratuit

Connexion haut débit disponible dans tous les espaces communs et appartements.

Codes d'accès Flèche
<!-- Carte image-contenu avec icône réduite --> <div class="card card--image-content card--image-content--small-icon"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="subtitle-sm font-secondary weight-bold text-primary">Titre</h3> <p class="card__description">Description</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>
Image Content Card - Sans icĂ´ne
Commentaire

Informations importantes

Cette carte ne contient pas d'icĂ´ne et offre plus d'espace pour le contenu textuel.

En savoir plus Flèche
<!-- Carte image-contenu sans icône --> <div class="card card--image-content card--image-content--no-icon"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="subtitle-sm font-secondary weight-bold text-primary">Titre</h3> <p class="card__description">Description</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>

Cartes Ligne Simple

Carte Info Pistes - Statistiques des pistes de ski

Infos pistes

58 /62
Pistes vertes
58 /62
Pistes bleues
58 /62
Pistes rouge
58 /62
Pistes noires
Carte Info Pistes - Variante avec cercles gris sans bordure

Infos pistes

2 /2
Snow park
58 km
Parcours raquettes
58 km
Ski de fond
58 km
Parcours piéton
Carte Ligne Simple - Icône gauche, texte central, flèche droite
Icône Texte de base aligné à gauche Flèche
<!-- Carte Info Pistes - Avec bordures --> <div class="card d-flex flex-column align-start gap-20 px-16"> <h3 class="title-xs font-primary weight-bold m-0">Infos pistes</h3> <div class="d-flex" style="flex-wrap: wrap; gap: 16px; justify-content: space-between;"> <div class="d-flex flex-column align-center gap-8" style="flex: 0 0 calc(25% - 12px);"> <div class="w-64 h-64 border-solid-2 border-radius-full d-flex align-center justify-center"> <div class="d-flex flex-column align-center"> <span class="text-xl font-bold">58</span> <span class="text-sm">/62</span> </div> </div> <span class="text-sm text-center">Pistes vertes</span> </div> <!-- Répéter pour les autres pistes --> </div> </div> <!-- Carte Info Pistes - Variante grise sans bordure --> <div class="card d-flex flex-column align-start gap-20 px-16"> <h3 class="title-xs font-primary weight-bold m-0">Infos pistes</h3> <div class="d-flex" style="flex-wrap: wrap; gap: 16px; justify-content: space-between;"> <div class="d-flex flex-column align-center gap-8" style="flex: 0 0 calc(25% - 12px);"> <div class="w-64 h-64 border-none bg-grey-slate-200 border-radius-full d-flex align-center justify-center"> <div class="d-flex flex-column align-center"> <span class="text-xl font-bold">2</span> <span class="text-sm">/2</span> </div> </div> <span class="text-sm text-center">Snow park</span> </div> <!-- Répéter pour les autres éléments --> </div> </div>
<!-- Carte ligne simple avec icône-texte-flèche --> <div class="card d-flex align-center justify-between gap-12"> <img src="icon.svg" alt="Icône" width="24" height="24"> <span class="text-base font-secondary text-primary" style="flex: 1;"> Texte de base </span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </div>
Carte Avis - Card d'avis client
Avis

Votre avis compte pour nous

Dites-nous tout en 1 minute chrono ! Votre avis compte pour améliorer chaque expérience à la montagne.

<!-- Carte Avis - Card d'avis client --> <div class="card d-flex flex-column align-center text-center gap-20 px-20 py-32"> <img src="../icons/interface/avis.svg" alt="Avis" width="95" height="95"> <h3 class="title-xs font-primary weight-bold m-0">Votre avis compte pour nous</h3> <p class="text-base font-secondary m-0" style="max-width: 400px;"> Dites-nous tout en 1 minute chrono ! Votre avis compte pour améliorer chaque expérience à la montagne. </p> <button class="button button--dark button--full" style="max-width: 400px;"> Je partage mon avis </button> </div>
Carte Ligne Simple - Sans bordure
WiFi Carte sans bordure visible Flèche
<!-- Carte ligne simple sans bordure --> <div class="card d-flex align-center justify-between gap-12 border-none"> <img src="icon.svg" alt="Icône" width="24" height="24"> <span class="text-base font-secondary text-primary" style="flex: 1;"> Texte de base </span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </div>
Carte Ligne Simple - Sans ombre
Casque Carte sans ombre (plate) Flèche
<!-- Carte ligne simple sans ombre --> <div class="card d-flex align-center justify-between gap-12 shadow-none"> <img src="icon.svg" alt="Icône" width="24" height="24"> <span class="text-base font-secondary text-primary" style="flex: 1;"> Texte de base </span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </div>
Carte Ligne Simple - Ombre renforcée
Sac Carte avec ombre renforcée et hover Flèche
<!-- Carte ligne simple avec ombre renforcée --> <div class="card d-flex align-center justify-between gap-12 shadow-lg shadow-transition hover-shadow-xl"> <img src="icon.svg" alt="Icône" width="24" height="24"> <span class="text-base font-secondary text-primary" style="flex: 1;"> Texte de base </span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </div>

Tailles de Cartes

Carte Image-Contenu Compacte
Localisation

Localisation compacte

Description réduite pour un affichage compact.

<!-- Carte image-contenu compacte --> <div class="card card--image-content card--compact"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="card__title">Titre</h3> <p class="card__description">Description</p> </div> </div>
Carte Image-Contenu Large
Smile & Pass

Récupération des skipass

Description plus spacieuse avec plus de contenu visible pour une meilleure lisibilité et plus d'informations détaillées.

QR Code Flèche
<!-- Carte image-contenu large --> <div class="card card--image-content card--large"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="card__title">Titre</h3> <p class="card__description">Description longue</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>
Carte Image-Contenu Extra Large
Sport 2000

Location de matériel de ski Sport 2000

Description extra large idéale pour du contenu détaillé et important. Cette taille permet d'afficher beaucoup plus d'informations avec un espacement généreux pour une lecture optimale. Parfait pour les contenus prioritaires qui nécessitent une attention particulière de l'utilisateur.

Réserver du matériel Flèche
<!-- Carte image-contenu extra large --> <div class="card card--image-content card--xl"> <div class="card__image-container"> <img src="icon.svg" class="card__image"> </div> <div class="card__content"> <h3 class="card__title">Titre détaillé</h3> <p class="card__description">Description très détaillée...</p> <a href="#" class="link-icon link-right link-align-right margin-top-10"> <span>Action détaillée</span> <img src="forward.svg" alt="Flèche" width="16" height="16"> </a> </div> </div>

États des Cartes

Carte Mise en Évidence

Carte importante

Cette carte est mise en Ă©vidence pour attirer l'attention.

Carte d'Erreur

Erreur détectée

Une erreur s'est produite lors du traitement.

Carte de Succès

Opération réussie

L'action a été effectuée avec succès.

Carte d'Avertissement

Attention requise

Cette situation nécessite votre attention.

Carte Désactivée

Carte désactivée

Cette carte est temporairement indisponible.

Layouts des Cartes

Carte Horizontale
Image

Titre horizontal

Description pour une carte avec layout horizontal.

Carte avec Badge
Nouveau

Carte avec badge

Cette carte inclut un badge informatif.

Carte avec Offre
-20%

Carte avec offre

Cette carte affiche une offre promotionnelle.

Groupes de Cartes

Groupe de Cartes (colonne)

Carte 1

Première carte du groupe.

Carte 2

Deuxième carte du groupe.

Grille de Cartes (2 colonnes)

Carte A

Carte dans une grille 2 colonnes.

Carte B

Deuxième carte de la grille.

Grille Adaptative

Auto 1

Grille adaptative.

Auto 2

S'adapte Ă  l'Ă©cran.

Auto 3

Responsive design.

Carte Météo

Carte Météo - Aujourd'hui

Aujourd'hui

Location La Norma
Nuageux
10°C Nuageux
↑10°C / ↓3°C
Humidité Humidité 30%
Vents Vents 12km/h
Neige Neige 20cm
<!-- Carte Météo --> <div class="card bg-grey-100 p-24 border-radius-md"> <div class="d-flex flex-column gap-16"> <!-- Titre principal --> <h2 class="title-md font-primary weight-bold text-primary m-0">Aujourd'hui</h2> <!-- Localisation avec icône --> <div class="d-flex align-center gap-8"> <img src="pin.svg" alt="Location" width="20" height="20"> <span class="text-base font-secondary text-grey-600">La Norma</span> </div> <!-- Section météo principale --> <div class="d-flex align-center justify-between mt-16"> <!-- Groupe gauche: icône météo + température principale --> <div class="d-flex align-center gap-4 pr-12"> <div class="d-flex flex-column align-center"> <img src="weather/cloud.svg" alt="Nuageux" width="120" height="120"> </div> <div class="d-flex flex-column align-center"> <span class="title-xl weight-bold">10°C</span> <span class="text-lg font-secondary text-grey-600">Nuageux</span> </div> </div> <!-- Divider vertical --> <div class="divider-vertical divider-vertical--large bg-black"></div> <!-- Groupe droit: températures min/max --> <div class="d-flex align-center gap-4 pl-12"> <span class="text-base font-secondary text-grey-600">↑10°C</span> <span class="text-base font-secondary text-grey-600">/</span> <span class="text-base font-secondary text-grey-600">↓3°C</span> </div> </div> <!-- Section statistiques météo --> <div class="d-flex justify-between mt-32 pt-24 border-top"> <!-- Humidité --> <div class="d-flex flex-column align-center"> <img src="weather/humidity.svg" alt="Humidité" width="24" height="24"> <span class="text-sm font-secondary text-grey-600 mt-8">Humidité</span> <span class="text-lg font-secondary weight-bold mt-4">30%</span> </div> <!-- Vents --> <div class="d-flex flex-column align-center"> <img src="weather/wind.svg" alt="Vents" width="24" height="24"> <span class="text-sm font-secondary text-grey-600 mt-8">Vents</span> <span class="text-lg font-secondary weight-bold mt-4">12km/h</span> </div> <!-- Neige --> <div class="d-flex flex-column align-center"> <img src="weather/snow.svg" alt="Neige" width="24" height="24"> <span class="text-sm font-secondary text-grey-600 mt-8">Neige</span> <span class="text-lg font-secondary weight-bold mt-4">20cm</span> </div> </div> </div> </div>

Notes d'Utilisation

Classes Disponibles

  • .card - Carte de base
  • .card--property - Carte propriĂ©tĂ© avec image et carousel
  • .card--document - Carte pour documents avec bouton d'action
  • .card--image-content - Carte avec icĂ´ne/image Ă  gauche
  • .card.d-flex.align-center.justify-between - Carte ligne simple (icĂ´ne-texte-flèche)
  • .card--compact, .card--large, .card--xl - Tailles
  • .card--highlighted, .card--error, .card--success, .card--warning, .card--disabled - États
  • .card--horizontal - Layout horizontal
  • .card--with-badge, .card--with-offer - Avec Ă©lĂ©ments dĂ©coratifs

Variantes Image-Content

  • .card--image-content--small-icon - IcĂ´ne rĂ©duite de 10% (16.2% au lieu de 18%)
  • .card--image-content--no-icon - Sans icĂ´ne, plus d'espace pour le contenu
  • Combinables avec les tailles : card--compact, card--large, card--xl

Carte Ligne Simple

  • Structure : card d-flex align-center justify-between gap-12
  • IcĂ´ne gauche : <img> avec dimensions 24x24px
  • Texte central : <span class="text-base font-secondary text-primary" style="flex: 1;">
  • Flèche droite : <img> avec dimensions 16x16px (icĂ´ne forward.svg)
  • Modificateurs bordures : border-none pour supprimer la bordure
  • Modificateurs ombres : shadow-none, shadow-lg, shadow-transition
  • Interactions : hover-shadow-xl pour effet au survol
  • IdĂ©ale pour des Ă©lĂ©ments de navigation ou des actions simples

Classes de Titres

  • .title-xs font-primary weight-bold text-primary tracking-tight - Titre pour cartes de document (combinaison de classes modulaires)
  • .subtitle-sm font-secondary weight-bold text-primary - Titre pour cartes image-content (combinaison de classes modulaires)
  • h3 - Titre standard pour cartes de base (police Roboto, 20px, semi-bold)
  • Toutes les classes de titres sont dĂ©finies dans titles.css

Classes de Boutons

  • .button--download - Bouton de tĂ©lĂ©chargement avec icĂ´ne (dĂ©fini dans button.css)
  • Voir le fichier button.css pour plus d'options de boutons

Classes de Groupement

  • .card-group - Groupe vertical de cartes
  • .card-grid - Grille adaptative
  • .card-grid--2-cols, .card-grid--3-cols, .card-grid--4-cols - Grilles fixes

Classes Utilitaires de Bordures

  • .border-none - Supprime toutes les bordures (!important)
  • .border-transparent - Bordure transparente (1px)
  • .border-solid - Bordure grise standard (1px)
  • .border-primary, .border-secondary - Bordures colorĂ©es
  • .border-top-none, .border-right-none, etc. - Supprime une bordure spĂ©cifique
  • .border-radius-none - Supprime tous les coins arrondis (!important)

Classes Utilitaires d'Ombres

  • .shadow-none - Supprime toutes les ombres (!important)
  • .shadow-xs, .shadow-sm, .shadow, .shadow-md, .shadow-lg - Tailles d'ombres
  • .shadow-primary, .shadow-secondary - Ombres colorĂ©es
  • .shadow-card, .shadow-card-hover - Ombres spĂ©cifiques aux cartes
  • .hover-shadow-md - Ombre au survol avec transition
  • .shadow-transition - Ajoute une transition fluide aux ombres

Responsive

Toutes les cartes sont responsive et s'adaptent automatiquement aux différentes tailles d'écran (mobile, tablette, desktop).

Accessibilité

Les cartes incluent les états de focus appropriés et supportent la navigation au clavier.