Retour

Tag (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.

Documentation

Tag seul sans icône

Label tag 

<a class="fr-tag" href="#">Label tag</a>

Tag seul icône à gauche

Label tag 

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

Tag seul icône à droite

Label tag 

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

Tag seul cliquable

Label tag 

<a class="fr-tag" href="#">Label tag</a>

Tag seul cliquable SM

Label tag 

<a class="fr-tag fr-tag--sm" href="#">Label tag</a>

Tag seul cliquable accentué

Label tag 

<a class="fr-tag fr-tag--green-emeraude" href="#">Label tag</a>

Tag seul non cliquable

Label tag

<p class="fr-tag">Label tag</p>

Tag seul non cliquable SM

Label tag

<p class="fr-tag fr-tag--sm">Label tag</p>

Tag seul désactivé

<button class="fr-tag" disabled>Label tag</button>

Tag seul désactivé SM

<button class="fr-tag fr-tag--sm" disabled>Label tag</button>

Groupe de tags cliquables

<ul class="fr-tags-group">
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag" href="#">Label tag</a>
    </li>
</ul>

Groupe de tags cliquables SM

<ul class="fr-tags-group">
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
    <li>
        <a class="fr-tag fr-tag--sm" href="#">Label tag</a>
    </li>
</ul>

Groupe de tags non cliquables

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

<ul class="fr-tags-group">
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
    <li>
        <p class="fr-tag">Label tag</p>
    </li>
</ul>

Groupe de tags non cliquables SM

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

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

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.