v1.0
đź“– Index de Navigation
Location de Base Variantes de Tailles Variantes de Couleurs Version Interactive Alignements Exemples d'Usage Documentation

Composant Location

Location de Base

Le composant location permet d'afficher une localisation géographique avec une hiérarchie visuelle claire.

Exemple de base
Localisation Alpes du Nord La Norma
Code HTML
<div class="location"> <img src="../icons/services/pin.svg" alt="Localisation" class="location__pin"> <span class="location__text">Alpes du Nord</span> <img src="../icons/navigation/forward.svg" alt="" class="location__separator"> <span class="location__text">La Norma</span> </div>

Variantes de Tailles

Le composant location est disponible en trois tailles : small, normal (par défaut), et large.

Small (.location--small)
Localisation Alpes du Sud Vars
Normal (par défaut)
Localisation Alpes du Nord La Norma
Large (.location--large)
Localisation Pyrénées Font-Romeu
Code HTML
/* Petite taille */ <div class="location location--small">...</div> /* Taille normale (par défaut) */ <div class="location">...</div> /* Grande taille */ <div class="location location--large">...</div>

Variantes de Couleurs

Adaptez la couleur du composant selon le contexte d'usage avec les variantes white et dark.

Version blanche (.location--white)
Localisation Alpes du Nord La Norma
Version foncée (.location--dark)
Localisation Vosges GĂ©rardmer
Code HTML
/* Version blanche (sur fond foncé) */ <div class="location location--white"> <img src="../icons/services/pin.svg" class="location__pin"> <span class="location__text">Alpes du Nord</span> <span class="location__text--secondary">La Norma</span> </div> /* Version foncée */ <div class="location location--dark">...</div>

Version Interactive

Ajoutez la classe .location--clickable pour créer une version interactive avec des effets de survol.

Version cliquable
Localisation Alpes du Nord La Norma
Code HTML
<div class="location location--clickable"> <img src="../icons/services/pin.svg" class="location__pin"> <span class="location__text">Alpes du Nord</span> <img src="../icons/navigation/forward.svg" class="location__separator"> <span class="location__text">La Norma</span> </div>

Options d'Alignement

ContrĂ´lez l'alignement horizontal du composant avec les classes d'alignement.

Alignement par défaut (gauche)
Localisation Par défaut
Centré (.location--center)
Localisation Centré
Ă€ droite (.location--end)
Localisation À droite
Code HTML
/* Alignement par défaut (gauche) */ <div class="location">...</div> /* Alignement centré */ <div class="location location--center">...</div> /* Alignement à droite */ <div class="location location--end">...</div>

Exemples d'Usage

Voici quelques exemples concrets d'utilisation du composant location dans différents contextes.

Dans une carte de propriété

Chalet Les Alpages

Localisation Alpes du Nord Chamonix

À partir de 150€/nuit

Dans un breadcrumb
Localisation France Alpes du Nord Haute-Savoie Chamonix
Code HTML
/* Carte de propriété */ <div class="property-card"> <h3>Chalet Les Alpages</h3> <div class="location location--small"> <img src="../icons/services/pin.svg" class="location__pin"> <span class="location__text">Alpes du Nord</span> <img src="../icons/navigation/forward.svg" class="location__separator"> <span class="location__text">Chamonix</span> </div> <p>À partir de 150€/nuit</p> </div> /* Breadcrumb */ <div class="location location--clickable"> /* Séquence de localisation complète */ </div>

Documentation Technique

Classes CSS disponibles et leurs usages dans le composant location.

Classe Description Usage
.location Classe de base du composant Obligatoire sur le conteneur principal
.location__text Texte de localisation Sur les éléments de texte
.location__text--secondary Texte secondaire (plus discret) Pour hiérarchiser l'information
.location__pin IcĂ´ne de pin de localisation Sur l'icĂ´ne pin.svg
.location__separator Icône de séparateur (flèche) Sur l'icône forward.svg
.location--small Version petite taille Combiné avec .location
.location--large Version grande taille Combiné avec .location
.location--white Version blanche (sur fond foncé) Pour fonds foncés
.location--dark Version foncée Pour fonds clairs
.location--clickable Version interactive avec hover Pour éléments cliquables
.location--center Alignement centré Centre le composant
.location--end Alignement Ă  droite Aligne Ă  droite