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.

Le tag peut être utilisé dans deux contextes :

Dans le contenu (carte, en-tête, liste) : il catégorise le contenu auquel il est apposé. Il peut être cliquable ou non cliquable.

En tant que filtre (dans une page de résultats de recherche par exemple). Dans ce cas il peut-être :

  • activable comme filtre en place à sélectionner/désélectionner,

  • supprimable, il sert de rappel à un filtre qui a été coché dans une sidebar ou une liste déroulante.

Tag non cliquable

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

Structure

Il 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>

Tailles

Tous les 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.

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> 

Groupe de tags non cliquables

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 cliquables MD

 

1 2 3 4 5 6 7 8 9 10 11 <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> </ul>

Groupe de tag non cliquable SM

1 2 3 4 5 6 7 8 9 10 11 <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> </ul>

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>

Tailles

Tous les 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.

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 tags cliquables

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 cliquables MD

1 2 3 4 5 6 7 8 9 10 11 <ul class="fr-tags-group"> <li>g <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>

Groupe de tags cliquables SM

1 2 3 4 5 6 7 8 9 10 11 12 13 <ul class="fr-tag-group"> <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>

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

Tag selectionnable (utilisation en filtre)

Structure

Il se compose des éléments suivants :

  • un libellé - obligatoire.

  • une coche quand il est sélectionné - obligatoire.

Le tag selectionnable permet d’activer/désactiver un filtre (liste de contenus, liste de résultats de recherche). Il reste en place qu’il soit sélectionné ou désélectionné.

Il est préférable de ne pas utiliser plus de 6 tags selectionnables dans un groupe, pour permettre à l’utilisateur de scanner rapidement la liste de filtres. Dans le cas où il y a plus de 6 filtres, utiliser un tag supprimable associé à une liste déroulante.

 

1 2 3 4 5 6 <button class="fr-tag" aria-pressed="false">Label tag</button> <button class="fr-tag" aria-pressed="true">Label tag sélectionné</button> <!-- SM --> <button class="fr-tag fr-tag--sm" aria-pressed="false">Label tag</button> <button class="fr-tag fr-tag--sm" aria-pressed="true">Label tag sélectionné</button>

À ne pas faire - Utiliser plus de 6 tags selectionnables pour un même filtre (ici la thématique)


À faire - Utiliser plutôt des tags supprimables associés à une liste déroulante

Tailles

Tous les 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.
La taille SM est obtenue par l’ajout du modificateur fr-tag--sm .

Groupes de tags selectionnables

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.

Il est préférable de ne pas utiliser plus de 6 tags activables dans un groupe.

Le groupe est obtenu par une liste <ul class="fr-tag-group"> (cf exemples précédents)

 

Tag supprimable (utilisation en filtre)

Structure

Il se compose des éléments suivants :

  • un libellé - obligatoire.

  • une croix - obligatoire.

Le tag supprimable permet de désactiver un filtre (liste de contenus, liste de résultats de recherche). Il n’est visible que si l’option de filtre est sélectionnée.

Le tag ‘supprimable’ n’autorise pas l’utilisation d’icône (autre que la croix de suppression déjà présente)

 

1 2 3 4 <button class="fr-tag fr-tag--dismiss" aria-label="Retirer [A Modifier - le filtre Label tag]" onclick="event.preventDefault(); this.parentNode.removeChild(this);">Label tag</button> <!-- taille SM --> <button class="fr-tag fr-tag--sm fr-tag--dismiss" aria-label="Retirer [A Modifier - le filtre Label tag]" onclick="event.preventDefault(); this.parentNode.removeChild(this);">Label tag</button>


Pour les développeurs
L’attribut aria-label doit contenir ‘Retirer’ suivi de l’intitulé du filter visible à l'écran afin de préciser à l’utilisateur l’action réalisable sur le bouton.

Le javascript donné en exemple est indicatif, à vous de l’implémenter dans votre environnement.

 

À ne pas faire - Utiliser une icône sur le tag supprimable

Tailles

Tous les 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.
La taille SM est obtenue par l’ajout du modificateur fr-tag--sm .

Groupes de tags supprimables

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.
Le groupe est obtenu par une liste <ul class="fr-tag-group"> (cf exemples précédents)

Règles d’utilisation

Usages

Les tags servent à regrouper par catégorie des contenus (par thème, sujet, type de document etc…). 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.

Les tags ne doivent pas être utilisés comme des badges, ils ne servent pas à donner le statut du contenu auquel il est associé.

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

Certains éléments du tag sont optionnels et les icônes peuvent être changées - voir la structure du composant.

Il est possible d’utiliser les couleurs illustratives sur les tags cliquables uniquement.

Élément

Valeur par défaut

Valeur(s) autorisée(s)

Élément

Valeur par défaut

Valeur(s) autorisée(s)

 

 

Token

Classe css

Fond

$background-action-low-blue-france

Correspondance :
Thème clair = $blue-france-925
Thème sombre = $blue-france-125

$[couleur]-925 (thème clair)
$[couleur]-125 (thème sombre)

exemples :
green-emeraude-main-925 /
green-emeraude-main-125

brown-caramel-main-925 /
brown-caramel-main-125

 

 

.fr-tag--couleur

.fr-tag--green-emeraude
.fr-tag--brown-caramel
.fr-tag--purple-glycine

 


Icône + Texte

$text-action-high-blue-france

Correspondance :
Thème clair = $blue-france-sun-113
Thème sombre = $blue-france-625



$[couleur]-sun (thème clair)
$[couleur]-moon (thème sombre)

exemples:
green-emeraude-sun-425 /
green-emeraude-moon-753

brown-caramel-425 /
brown-caramel-moon-901

Voir l’ensemble des couleurs illustratives à disposition



Besoin d’aide ?

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