DSFR v1.12.1
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<a id="link-4914" href="#" class="fr-link">Libellé lien</a>
<a id="link-4917" href="#" class="fr-link fr-icon-arrow-left-line fr-link--icon-left">Libellé lien</a>
<a id="link-4920" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé lien</a>
<a id="link-4923" href="#" class="fr-link fr-link--sm">Libellé lien</a>
<a id="link-4926" href="#" class="fr-link fr-link--lg">Libellé lien</a>
<a id="link-4929" aria-disabled="true" role="link" class="fr-link">Libellé lien</a>
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="link-4932" href="#" class="fr-link">Libellé lien</a>
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.
<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>
<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>
<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>
<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>