Location (Localisation)

Le composant localisation est une métadonnée qui permet d’associer un lieu à un article, un événement…

Usage

• La localisation correspond à une référence géographique. Il peut s’agir d’une commune, d’un département… ou de coordonnées GPS.
• Elle peut être associée à un article, un événement…
• Ce composant peut s’afficher sous forme d’un lien pour pouvoir accéder à d’autres contenus liés au même lieu.

Style & code

Ce composant n’a pas de valeur sémantique HTML, il peut s’agir d’une balise <p> ou d’une simple balise <span> contenant l’information géographique choisie. Il doit être un enfant de su-metadata afin de récupérer les styles des métadonnées, et doit porter la classe su-location.

Standard

<div class="su-metadata">
    <p class="su-location">Rennes</p>
    <span class="su-location">Roazhon</span>
</div>

Noms longs

Si le nom du lieu est trop long pour tenir sur une seule ligne, il passera à la ligne.

<div class="su-metadata" style="width: 200px">
    <p class="su-location">Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson</p>
</div>

Il est toutefois possible de tronquer ce nom sur une ligne avec la classe su-truncate-1.

<div class="su-metadata" style="width: 200px">
    <p class="su-location su-truncate-1">Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson</p>
</div>

Sur fond sombre

Il est possible d’associer à ce composant la classe su-negative afin de pouvoir l’utiliser sur un fond sombre. Cette classe peut-être positionnée sur un parent ou sur le composant.

<section class="su-negative su-margin-bottom-l">
    <p>Sur un parent&nbsp;:</p>
    <div class="su-metadata">
        <p class="su-location">Rennes</p>
        <span class="su-location">Roazhon</span>
    </div>
</section>
<section>
    <p class="su-negative">Sur le composant&nbsp;:</p>
    <div class="su-metadata">
        <p class="su-location su-negative">Rennes</p>
        <span class="su-location su-negative">Roazhon</span>
    </div>
</section>