DSFR v1.12.0

Retour

Lien (link)

Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton.

Documentation

Lien seul

<a id="link-4914" href="#" class="fr-link">Libellé lien</a>

Lien icon à gauche

<a id="link-4917" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien</a>

Lien icon à droite

<a id="link-4920" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien</a>

Lien seul SM

<a id="link-4923" href="#" class="fr-link fr-link--sm">Libellé lien</a>

Lien seul LG

<a id="link-4926" href="#" class="fr-link fr-link--lg">Libellé lien</a>

Lien seul désactivé

<a id="link-4929" aria-disabled="true" role="link" class="fr-link">Libellé lien</a>

Lien externe

<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="link-4932" href="#" class="fr-link">Libellé lien</a>

Groupe de liens

Lorsque que l'on a plus d'un lien, il convient d'utiliser un groupe de liens.
La taille de tous les liens peut être définie au niveau du groupe.

Groupe de liens

<ul class="fr-links-group">
    <li>
        <a id="link-4943" href="#" class="fr-link">Libellé lien 1</a>
    </li>
    <li>
        <a id="link-4944" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 2</a>
    </li>
    <li>
        <a id="link-4945" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 3</a>
    </li>
    <li>
        <a id="link-4946" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 4</a>
    </li>
    <li>
        <a id="link-4947" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 5</a>
    </li>
    <li>
        <a id="link-4948" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 6</a>
    </li>
    <li>
        <a id="link-4949" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 7</a>
    </li>
    <li>
        <a id="link-4950" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 8</a>
    </li>
    <li>
        <a id="link-4951" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 9</a>
    </li>
</ul>

Groupe de liens sm

<ul class="fr-links-group fr-links-group--sm">
    <li>
        <a id="link-4962" href="#" class="fr-link">Libellé lien 1</a>
    </li>
    <li>
        <a id="link-4963" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 2</a>
    </li>
    <li>
        <a id="link-4964" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 3</a>
    </li>
    <li>
        <a id="link-4965" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 4</a>
    </li>
    <li>
        <a id="link-4966" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 5</a>
    </li>
    <li>
        <a id="link-4967" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 6</a>
    </li>
    <li>
        <a id="link-4968" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 7</a>
    </li>
    <li>
        <a id="link-4969" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 8</a>
    </li>
    <li>
        <a id="link-4970" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 9</a>
    </li>
</ul>

Groupe de liens lg

<ul class="fr-links-group fr-links-group--lg">
    <li>
        <a id="link-4981" href="#" class="fr-link">Libellé lien 1</a>
    </li>
    <li>
        <a id="link-4982" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 2</a>
    </li>
    <li>
        <a id="link-4983" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 3</a>
    </li>
    <li>
        <a id="link-4984" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 4</a>
    </li>
    <li>
        <a id="link-4985" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 5</a>
    </li>
    <li>
        <a id="link-4986" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 6</a>
    </li>
    <li>
        <a id="link-4987" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 7</a>
    </li>
    <li>
        <a id="link-4988" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 8</a>
    </li>
    <li>
        <a id="link-4989" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 9</a>
    </li>
</ul>

Groupe de liens en ligne

<ul class="fr-links-group fr-links-group--inline">
    <li>
        <a id="link-5000" href="#" class="fr-link">Libellé lien 1</a>
    </li>
    <li>
        <a id="link-5001" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 2</a>
    </li>
    <li>
        <a id="link-5002" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 3</a>
    </li>
    <li>
        <a id="link-5003" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 4</a>
    </li>
    <li>
        <a id="link-5004" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 5</a>
    </li>
    <li>
        <a id="link-5005" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 6</a>
    </li>
    <li>
        <a id="link-5006" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 7</a>
    </li>
    <li>
        <a id="link-5007" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien 8</a>
    </li>
    <li>
        <a id="link-5008" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien 9</a>
    </li>
</ul>

Autres versions

Paramètres d’affichage

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