Tag

Le tag catégorise/classe/organise les contenus à l'aide de mots-clés. Il aide les utilisateurs à rechercher et à trouver facilement une information.

Tag non cliquable

Le tag par défaut permet d’afficher une information sur un contenu.

Structure

Is se compose des éléments suivants :

  • un libellé - obligatoire.

  • une icône - optionnelle.

Le libellé contient un mot-clé ou une expression qui permet de catégoriser votre contenu

 

1 2 <p class="fr-tag">Label tag</p> <p class="fr-tag fr-fi-arrow-right-line fr-tag--icon-left">Label tag</p>

 

Tag cliquable

Structure

Is se compose des éléments suivants :

  • un libellé - obligatoire.

  • un lien - obligatoire.

  • une icône - optionnelle.

Le tag cliquable donne accès à une page avec des contenus associés à ce tag (liste de contenus, liste de résultats de recherche).

1 2 <a href="#" class="fr-tag">Label tag</a> <a href="#" class="fr-tag fr-fi-arrow-right-line fr-tag--icon-left">Label tag</a>

Groupe de tags

Les tags peuvent être utilisés à plusieurs dans des groupes de tags. Dans ce cas-là ils appliquent des espacement préalablement définis par le DSFR.

Groupe de tags non cliquable

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <ul class="fr-tags-group"> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> <li> <span class="fr-tag">Label tag</span> </li> </ul>

Groupe de tags cliquable

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <ul class="fr-tags-group"> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li> </ul>

 

A noter que pour le groupe de tags SM le padding autour du tag est plus important que lorsqu’il est utilisé seul pour permettre le tap en mobile. Afin de passer le groupe de tag en taille SM

 

Tailles

Les deux types de tags sont disponibles en deux tailles SM et MD pour pouvoir s’adapter au contexte d’affichage. La taille MD est la taille par défaut.

Tag non cliquable

 

1 2 3 4 5 <p class="fr-tag">Label tag</p> <p class="fr-tag fr-fi-arrow-right-line fr-tag--icon-left">Label tag</p> <p class="fr-tag fr-tag--sm">Label tag</p> <p class="fr-tag fr-tag--sm fr-fi-arrow-right-line fr-tag--icon-left">Label tag</p> 

 

Tag cliquables


1 2 3 4 5 <a href="#" class="fr-tag" target="_self">Label tag</a> <a href="#" class="fr-tag fr-fi-arrow-right-line fr-tag--icon-left" target="_self">Label tag</a> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> <a href="#" class="fr-tag fr-fi-arrow-right-line fr-tag--sm fr-tag--icon-left" target="_self">Label tag</a>

Groupe de tag cliquable SM

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <ul class="fr-tag-list"> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> <li> <a href="#" class="fr-tag fr-tag--sm" target="_self">Label tag</a> </li> </ul>

 

Groupe de tag non cliquable SM

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <ul class="fr-tags-group"> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> <li> <p class="fr-tag fr-tag--sm">Label tag</p> </li> </ul>

 

Règles d’utilisation

Usages

Les tags ne doivent pas être utilisés comme des labels. Ils ne servent pas à donner des informations de complément à la catégorisation (auteur, date...). Pour ce faire, vous pouvez utiliser l’élément « détail » prévu sur les cartes, et la typo XS « mention » pour les page de contenu.

Accessibilité

Les tags doivent être dans des éléments <p>, <li> ou <a>.

Dans le cas d’un tag cliquable, un attribut title peut être ajouté pour préciser la cible du lien :

<a href=”tag/bike/” title=“Voir tous les articles concernant le vélo”>Vélo</a>

Contenus

Les libellés des tags doivent être courts et clairs.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels et les icônes peuvent être changées - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :